Ridwanul Hafiz Ridwanul Hafiz - 7 months ago 9
HTML Question

How to create a responsive Top Bar with css

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.

enter image description here

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

enter image description here

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;
}

Answer

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>