Create my menu bar to resize as browser size changes - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Menu Bar

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Menu Bar

Description

Create my menu bar to resize as browser size changes

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
#logo {<!--from w  ww. java  2  s.  c  o m-->
   width:31%;
   max-width:151px;
   margin:0 auto;
   position:absolute;
   top:0;
   left:0;
   right:0;
}

#logo img {
   width:100%;
}

#social {
   height:33px;
   width:21%;
   background-color:Chartreuse;
}

#bar {
   height:31px;
   background:yellow;
}
</style> 
 </head> 
 <body> 
  <div id="logo"> 
   <img src="https://www.java2s.com/style/demo/Firefox.png"> 
  </div> 
  <div id="social"> 
  </div> 
  <div id="bar"> 
  </div>  
 </body>
</html>

Related Tutorials