Navbar along with title and comments - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Nav Bar

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

Description

Navbar along with title and comments

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css"> 
  <style id="compiled-css" type="text/css">
@media screen and (max-width: 1023px)  {
   .navbar {<!--from   ww w  .j  ava2 s .c o  m-->
      display:flex;
      flex-wrap:wrap;
   }
   
   .navbar-brand {
      min-width:100%;
   }
   
   .navbar-menu {
      margin-left:auto;
      min-width:51%;
   }

}
</style> 
 </head> 
 <body> 
  <nav class="navbar" role="navigation"> 
   <div class="navbar-brand"> 
    <div class="navbar-item"> 
     <p class="title"> <span>Lorem ipsu</span> </p> 
    </div> 
    <div class="button navbar-burger is-active"> 
     <span></span> 
     <span></span> 
     <span></span> 
    </div> 
   </div> 
   <div class="navbar-menu is-active"> 
    <div class="navbar-end"> 
     <div class="navbar-item"> 
      <div>
        Lorem ipsum d 
      </div> 
     </div> 
     <div class="navbar-item"> 
      <div>
        Lorem ipsum d 
      </div> 
     </div> 
    </div> 
   </div> 
  </nav> 
  <div class="section content"> 
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper molestie lacus sed fermentum. Aliquam erat volutpat. Vestibulum tortor neque, ornare vitae tempor hendrerit, luctus at neque. Phasellus sed quam pharetra, tincidunt tortor</p> 
  </div>  
 </body>
</html>

Related Tutorials