I am trying to have a modal as navigation bar for mobile view, And
When I run the below snippet, In mobile view when I click on icon bar/ menu bar, None of buttons are responding in the modal. I am not getting any clue on this. Thanks for any help in advance
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="height: 100vh !important">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body" style="height: 100vh; opacity:1">
<button type="button" class="close" data-dismiss="modal" >×</button>
<ul class="nav navbar-nav navbar-right hidden-lg hidden-md" >
<li>HOME1</li>
<li>BAND1</li>
<li>TOUR1</li>
<li>CONTACT</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">MORE
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Merchandise</li>
<li>Extras</li>
<li>Media</li>
</ul>
</li>
<li><span class="glyphicon glyphicon-search"></span></li>
</ul>
</div>
</div>
</div>
</div>
<div class="bg-img-hero">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myModal">
<span class="icon-bar" style="color: yellow !important"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right" >
<li >HOME</li>
<li>BAND</li>
<li>TOUR</li>
<li>CONTACT</li>
</ul>
</div>
<div class="collapse navbar-collapse" id="myNavbar1">
<ul class="nav navbar-nav navbar-right hidden-lg hidden-md" >
<li>HOME1</li>
<li>BAND1</li>
<li>TOUR1</li>
<li>CONTACT</li>
</ul>
</div>
</div>
</nav>
</div>
Add All JS & CSS file
also change here data-toggle="collapse" to data-toggle="modal"
<button type="button" class="navbar-toggle" data-toggle="modal" data-target="#myModal">
<span class="icon-bar" style="color: yellow !important"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="height: 100vh !important">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body" style="height: 100vh; opacity:1">
<button type="button" class="close" data-dismiss="modal" >×</button>
<ul class="nav navbar-nav navbar-right hidden-lg hidden-md" >
<li>HOME1</li>
<li>BAND1</li>
<li>TOUR1</li>
<li>CONTACT</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">MORE
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Merchandise</li>
<li>Extras</li>
<li>Media</li>
</ul>
</li>
<li><span class="glyphicon glyphicon-search"></span></li>
</ul>
</div>
</div>
</div>
</div>
<div class="bg-img-hero">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="modal" data-target="#myModal">
<span class="icon-bar" style="color: yellow !important"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src="Images\logos\flexit-logo-TM-comp.png" style="padding-top:15px" >
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right" >
<li >HOME</li>
<li>BAND</li>
<li>TOUR</li>
<li>CONTACT</li>
</ul>
</div>
<div class="collapse navbar-collapse" id="myNavbar1">
<ul class="nav navbar-nav navbar-right hidden-lg hidden-md" >
<li>HOME1</li>
<li>BAND1</li>
<li>TOUR1</li>
<li>CONTACT</li>
</ul>
</div>
</div>
</nav>
</div>
please check your bootstrap version and the relevant jquery version. try adding cdns in to
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
when those links are not added collapse will not works fine.
Related
I'm a beginner using Bootstrap. I've searched a lot of related problems but didn't find useful solution. Here is part of my code:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="container">
<!-- Navigation Bar -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
aria-expanded="true" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand">Function Graph</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a data-toggle="tab" href="#about">About</a></li>
<li class="dropdown">
Plot<span class="caret"></span>
<ul class="dropdown-menu">
<li><a class="dropdown-item" data-toggle="tab" href="#automatic">Automatic</a></li>
<li><a class="dropdown-item" data-toggle="tab" href="#manual">Manual</a></li>
</ul>
</li>
<li><a data-toggle="tab" href="#faqs">FAQs</a></li>
<li><a data-toggle="tab" href="#comment">Comment</a></li>
<li><a data-toggle="tab" href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
<!-- Tab Content -->
<div class="tab-content">
<div class="tab-pane fade in active" id="about">
<div class="jumbotron">
<h1>Draw your math function on web</h1>
<p>If you have any problems, please navigate to <em><strong><a data-toggle="tab" href="#faqs">FAQs</a></strong></em> on the top and there are some solutions.</p>
<p>If you still have unsolved questions, please don't hesitate to <em><strong><a data-toggle="tab" href="#contact">Contact</a></strong></em> us via e-mail.</p>
</div>
</div>
<div class="tab-pane fade" id="automatic">
<p>automatic</p>
</div>
<div class="tab-pane fade" id="manual">
<p>manual</p>
</div>
<div class="tab-pane fade" id="faqs">
<p>faqs</p>
</div>
<div class="tab-pane fade" id="comment">
<p>comment</p>
</div>
<div class="tab-pane fade" id="contact">
<p>contact</p>
</div>
</div>
</div>
What I want to do is: when click "FAQs", it can not only show the content of faqs, but also navigate to "FAQs" on the navigation bar, but now it is still under the "About" bar.
You can use the method show.bs.tab, described in the Official Documentation.
Basically, you listen to the newly-active just-shown tab, you get its id and highlight the corresponding element inside the nav.
Here's the code:
$('a[data-toggle="tab"]').on('shown.bs.tab', function() {
$('nav').find('li.active').removeClass('active');
$('nav').find('a[href="#'+$('.tab-pane.active').attr('id')+'"]').parent('li').addClass('active');
});
<script
src="https://code.jquery.com/jquery-2.2.4.js"
integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="
crossorigin="anonymous"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="container">
<!-- Navigation Bar -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
aria-expanded="true" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand">Function Graph</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a data-toggle="tab" href="#about">About</a></li>
<li class="dropdown">
Plot<span class="caret"></span>
<ul class="dropdown-menu">
<li><a class="dropdown-item" data-toggle="tab" href="#automatic">Automatic</a></li>
<li><a class="dropdown-item" data-toggle="tab" href="#manual">Manual</a></li>
</ul>
</li>
<li><a data-toggle="tab" href="#faqs">FAQs</a></li>
<li><a data-toggle="tab" href="#comment">Comment</a></li>
<li><a data-toggle="tab" href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
<!-- Tab Content -->
<div class="tab-content">
<div class="tab-pane fade in active" id="about">
<div class="jumbotron">
<h1>Draw your math function on web</h1>
<p>If you have any problems, please navigate to <em><strong><a data-toggle="tab" href="#faqs">FAQs</a></strong></em> on the top and there are some solutions.</p>
<p>If you still have unsolved questions, please don't hesitate to <em><strong><a data-toggle="tab" href="#contact">Contact</a></strong></em> us via e-mail.</p>
</div>
</div>
<div class="tab-pane fade" id="automatic">
<p>automatic</p>
</div>
<div class="tab-pane fade" id="manual">
<p>manual</p>
</div>
<div class="tab-pane fade" id="faqs">
<p>faqs</p>
</div>
<div class="tab-pane fade" id="comment">
<p>comment</p>
</div>
<div class="tab-pane fade" id="contact">
<p>contact</p>
</div>
</div>
</div>
Link to a working Codepen.
This menu needs to become a Bootstrap burger menu on resolutions with widths 992px and below.
I am using Bootstrap 3.
<div class="container-fluid">
<div class="row navbar">
<div class="col-sm-2 col-sm-offset-1"><a class="btn" href="index.html">Home</a></div>
<div class="col-sm-2"><a class="btn" href="prices.html">Our Prices</a></div>
<div class="col-sm-2"><a class="btn" href="location.html">Location</a></div>
<div class="col-sm-2"><a class="btn" href="about.html">About Us</a></div>
<div class="col-sm-2"><a class="btn" href="contact.html">Contact Us</a></div>
</div>
</div>
I think this is what you are looking for
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a class="btn" href="index.html">Home</a></li>
<li><a class="btn" href="prices.html">Our Prices</a></li>
<li><a class="btn" href="location.html">Location</a></li>
<li><a class="btn" href="about.html">About Us</a></li>
<li><a class="btn" href="contact.html">Contact Us</a></li>
</ul>
</div>
</div>
</nav>
I want that when someone opens it then menu must be opened, no need to click the button for opening it. When someone clicks the button then closes it instead of opening it.
Can anyone please help me? How can I achieve the result?
<link href="http://vsss.co.in/assets/css/main.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="header-nav animate-dropdown">
<div class="container">
<div class="yamm navbar navbar-default" role="navigation">
<div class="navbar-header">
<button data-target="#mc-horizontal-menu-collapse" data-toggle="collapse" class="navbar-toggle collapsed" type="button" style="background-color: rgb(0, 108, 180);width: 100%;">
<span class="sr-only">Toggle navigation</span>
<span style="font-size: 22px;color: #fff;text-align: center;width: 100%;">Menu</span>
</button>
</div>
<div class="nav-bg-class">
<div class="navbar-collapse collapse" id="mc-horizontal-menu-collapse" style="height: 0px;">
<div class="nav-outer">
<ul class="nav navbar-nav">
<li class="active dropdown yamm-fw"> Home </li>
<li class="dropdown mega-menu">
Category
<ul class="dropdown-menu container">
<li>
<div class="yamm-content">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-3 col-menu">
<ul class="links">
<li>Premium pens</li>
<li>Pens & refills</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
</div>
Yes by putting show class with collapse it will work for you see in example code:
<link href="http://vsss.co.in/assets/css/main.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="header-nav animate-dropdown">
<div class="container">
<div class="yamm navbar navbar-default" role="navigation">
<div class="navbar-header">
<button data-target="#mc-horizontal-menu-collapse" data-toggle="collapse" class="navbar-toggle collapsed" type="button" style="background-color: rgb(0, 108, 180);width: 100%;">
<span class="sr-only">Toggle navigation</span>
<span style="font-size: 22px;color: #fff;text-align: center;width: 100%;">Menu</span>
</button>
</div>
<div class="nav-bg-class">
<div class="navbar-collapse collapse show" id="mc-horizontal-menu-collapse" style="height: 0px;">
<div class="nav-outer">
<ul class="nav navbar-nav">
<li class="active dropdown yamm-fw"> Home </li>
<li class="dropdown mega-menu">
Category
<ul class="dropdown-menu container">
<li>
<div class="yamm-content">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-3 col-menu">
<ul class="links">
<li>Premium pens</li>
<li>Pens & refills</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
</div>
When I click on a menu item the menu does not close. I have already checked the imports of JS and CSS and seemingly everything is OK, is there something else I need to do to run the menu?
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Sobre</li>
<li>Serviços</li>
<li>Opiniões</li>
<li>Gallery</li>
<li>News</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
for me works...
$(document).ready(function(){
$('.navbar-collapse a').on('click', function(){
$('.navbar-toggle').click();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Sobre</li>
<li>Serviços</li>
<li>Opiniões</li>
<li>Gallery</li>
<li>News</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
I'm not certain, but i think it may be dependant on jquery ui... some bootstrap features are. I can't help much further with current knowledge of the question...
I've been having a lot of trouble with imports too.. you can try checking on your browser debug console to be sure everything is being load, also.. on chrome: f12, tab sources.
I hope it has been helpful.
Try It, I think, it usefull.
<nav class="navbar navbar-static-top">
<div>
<div class="navbar-header" >
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar_logistic" aria-expanded="false" aria-controls="navbar" id="button_menu_toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar line_orange"></span>
<span class="icon-bar line_orange"></span>
<span class="icon-bar line_orange"></span>
</button>
</div>
<div id="navbar_logistic" class="navbar-collapse collapse">
<ul class="nav navbar-nav flot_none">
<li class="active">Home</li>
<li>Home2</li>
<li>Home3</li>
<li>Home4</li>
</ul>
</div>
</div>
</nav>
check this out
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<body>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar" aria-expanded="false">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Sobre</li>
<li>Serviços</li>
<li>Opiniões</li>
<li>Gallery</li>
<li>News</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
</body>
I'm trying to stick notification submenu to toggle menu in small screens and stick to right on small screens like the following
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav role="navigation" class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle collapsed pull-left">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Abount</li>
<li>Contact</li>
</ul>
</div>
</div>
<ul class="nav">
<li class="dropdown dropdown-list">
<a href="javascript:;" data-toggle="dropdown" dropdown-animate="" aria-haspopup="true" class="dropdown-toggle">
<i class="glyphicon glyphicon-bell"></i>
<span class="label label-danger">11</span>
</a>
</li>
</ul>
</nav>
But unfortunately it does not work. Please help me how could I do it?
To keep the notification always visible, you could add them to the nav-header like this:
<div class="navbar-header">
<button class="navbar-toggle collapsed">...</button>
<div class="nav navbar-brand pull-right">
<a href="#" >
<i class="glyphicon glyphicon-bell"></i>
<span class="label label-danger">11</span>
</a>
</div>
</div>
.notifications.navbar-brand {
font-size: 14px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" >
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse"
data-target=".navbar-collapse" >
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="nav navbar-brand pull-right notifications">
<a href="#" >
<i class="glyphicon glyphicon-bell"></i>
<span class="label label-danger">11</span>
</a>
</div>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Abount</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>