How to create a responsive Top Bar with css

Question

I want create a topbar which has two section.First one is 230px(the black one). I want the rest part (the ash one) as an another div.

But when I open it on a big screen. the following is happening.

Here is the HTML Code below:

<div id="topNav">

<div class="websiteName">

    <h1><i class="fa fa-paper-plane"></i> Admin Panel</h1>

</div>

<div class="topbar">

    <a class="mainMenuTrigger" data-type="on"><i class="fa fa-long-arrow-left"></i></a>

    <a class="settingsTrigger"><i class="fa fa-cog fa-spin fa-fw"></i></a>

</div>

Here is the CSS:

#topNav{

  width: 100%;

  display: inline-block;

  position: fixed;

  top: 0;

  left: 0;

  z-index: 99;

}

.websiteName{

    width: 230px;

    display: block;

    float: left;

    background: #242A34;

    padding: 15px 0;

}

.websiteName h1{

  color: #fff;

  font-size: 18px;

  margin: 0;

  padding: 0;

  text-align: center;

  font-family: $font-family-base;

}

.topbar{

   background: #fff;

   display: block;

   height: 50px;

   position: relative;

   width: 1135px;

   float: left;

}

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

Something like this?

width: calc(100% - 230px);: This allows for the responsive top bar.
You also need to set the two elements you plan setting side by side to inline-block.

#topNav{
  width: 100%;
  display: inline-block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
}
.websiteName{
    width: 230px;
    display: inline-block;
    float: left;
    background: #242A34;
    padding: 15px 0;
}
.websiteName h1{
  color: #fff;
  font-size: 18px;
  margin: 0;
  padding: 0;
  text-align: center;
  font-family: $font-family-base;
}
.topbar{
   background: #ccc;
   display: inline-block;
   height: 50px;
   position: relative;
   width: calc(100% - 230px);
   float: left;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div id="topNav">
<div class="websiteName">
    <h1><i class="fa fa-paper-plane"></i> Admin Panel</h1>
</div>
<div class="topbar">
    <a class="mainMenuTrigger" data-type="on"><i class="fa fa-long-arrow-left"></i></a>
    <a class="settingsTrigger"><i class="fa fa-cog fa-spin fa-fw"></i></a>
</div>

How to create a responsive Top Bar with css

Sign up