Please help through this problem to bring in horizontal navigation
The code is:-
<div class="navbar navbar-inverse navbar-fixed-top " id="menu">
<div class="container">
<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="navbar-collapse collapse move-me">
<ul class="nav navbar-nav navbar-left">
<li>Hello <?php echo $_SESSION['loggedin_name']; ?></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>ATTENDANCE </li>
<li>PROFILE </li>
<li>TIMETABLE</li>
<li> STATISTICS</li>
<li>LOGOUT</li>
</ul>
</div>
</div>
Are you are using the latest Bootstrap?
I think you have to add navbar-default to your <div class="navbar"> and navbar-nav to your <ul class="nav">
<div class="container">
<h1>Bootstrap Site</h1>
<div class="navbar navbar-default">
<div class="navbar-inner">
<div class="container">
<ul class="nav navbar-nav navbar-right">
<li>ATTENDANCE </li>
<li>PROFILE </li>
<li>TIMETABLE</li>
<li> STATISTICS</li>
<li>LOGOUT</li>
</ul>
</div>
</div>
use this bootstrap cdn link it will work.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
Related
In Bootstrap 3 I'm trying to create a navbar which will have to ul, both of which will align to the right. But when I add navbar-right to both ul's, they both align to the right, but the second ul in the markup displays first? What do I need to do to get them to display in the proper sequence?
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<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>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Register</li>
<li>Login</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
Link to Codeply: https://www.codeply.com/go/LibLIdo8NW
Just write the ul for Register and Login first that will solve your issue.
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>Register</li>
<li>Login</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
Updated link to your demo
Update:
The class navbar-right has the property float: right!important; which pushes the first element to the right most of the screen.
Overriding this property would be another hack :)
This is the right process.
Check this link.
In order to have your desired result you just have to switch the ul's for these elements.
Take navbar-right class to container for both UL's.
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<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>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse navbar-right">
<ul class="nav navbar-nav ">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav ">
<li>Register</li>
<li>Login</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container">
<div class="text-center">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
</div>
On smaller devices the text ("JH") currently moves underneath the collapsed menu toggle on the left side of the navbar - is there a way to align it so that "JH" is level with the menu toggle but on the right side of the navbar instead? I'm struggling with how to achieve this but I'm sure it's very simple. Many thanks in advance, Jon
My code is as follows:-
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-target=".navbar-collapse"
data-toggle="collapse" type="button"><span class=
"icon-bar"></span> <span class="icon-bar"></span> <span class=
"icon-bar"></span></button>
</div>
<ul class="nav navbar-nav navbar-left">
<li class="active">
JH
</li>
</ul>
<div class="navbar-collapse collapse" id="navbar">
<ul class="nav navbar-nav navbar-right">
<li>
<span>About</span>
</li>
<li>
<span>Resume</span>
</li>
<li>
<span>Portfolio</span>
</li>
<li>
<span>Blog</span>
</li>
<li>
<span>Contact</span>
</li>
</ul>
</div>
</div>
</nav>
http://www.jonhowlett.uk/
Put this
<ul class="nav navbar-nav navbar-left">
<li class="active">
JH
</li>
</ul>
inside <div class="navbar-header">
<div class="navbar-header">
<button class="navbar-toggle" data-target=".navbar-collapse"
data-toggle="collapse" type="button"><span class=
"icon-bar"></span> <span class="icon-bar"></span> <span class=
"icon-bar"></span></button>
<ul class="nav navbar-nav navbar-left">
<li class="active">
JH
</li>
</ul>
</div>
You're navbar has add HTML that shouldn't be necessary. See docs.
<ul class="nav navbar-nav navbar-left">
<li class="active">
JH
</li>
</ul>
If you want to add a background color to the brand, just use CSS. See example.
.navbar.navbar-custom .navbar-brand {
background: #e7e7e7;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-custom">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-target=".navbar-collapse" data-toggle="collapse" type="button"><span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
</button> <a class="navbar-brand" href="http://www.jonhowlett.uk/home.html">JH</a>
</div>
<div class="navbar-collapse collapse" id="navbar">
<ul class="nav navbar-nav navbar-right">
<li> <span>About</span>
</li>
<li> <span>Resume</span>
</li>
<li> <span>Portfolio</span>
</li>
<li> <span>Blog</span>
</li>
<li> <span>Contact</span>
</li>
</ul>
</div>
</div>
</nav>
Hello stackoverflow people, I need help with centering my Website Title, here is the print screen of website:
As you can see Website title is in the left of the navbar here is my html:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<!--Mobilus buttonas-->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" 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" href="#">Website title</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul id="top-menu" class="nav navbar-nav navbar-left main_nav">
<li class="active">Home</li>
<li>About</li>
<li>Services</li>
<li>Works</li>
</ul>
<ul id="top-menu" class="nav navbar-nav navbar-right main_nav">
<li>Team</li>
<li>Pricing</li>
<li>Blog</li>
<li>Contacts</li>
</ul>
</div>
</div>
</nav>
I'am using bootstrap so there is no point posting css, so I will give you jsfiddle so it could be simplier: https://jsfiddle.net/fNPvf/18964/ . So i repeat, I don't know how to make Website Title in the center of website?
Try this:
.navbar-brand {
position: absolute;
left: 50%;
transform: translate(-50%, 0);
}
Build something like col5-col2-col5. You maybe have to adjust this for other resolutions. Centering stuff without flexbox is always a pain.
Like this:
<header id="header">
<!--Meniu laukas-->
<div class="menu_area">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="row">
<div class="col-md-5">
<ul id="top-menu" class="nav navbar-nav navbar-left main_nav">
<li class="active">Home</li>
<li>About</li>
<li>Services</li>
<li>Works</li>
</ul>
</div>
<div class="col-md-2">
<div class="navbar-header">
<a class="navbar-brand" href="#">Website title</a>
</div>
</div>
<div class="col-md-5">
<ul id="top-menu" class="nav navbar-nav navbar-left main_nav pull-right">
<li class="active">Home</li>
<li>About</li>
<li>Services</li>
<li>Works</li>
</ul>
</div>
</div>
</div>
</nav>
</div>
</header>
https://jsfiddle.net/fNPvf/18972/
add the following class in your css
you may adjust this value for various media queries and add the class to the container check the following fiddle https://jsfiddle.net/fNPvf/18975/
.center-container{width:705px;}
I have created this menu for my needs. It is responsive, since I'm using bootstrap, and it is custom, because i needed 2 rows for the right side of the menu. What I need is, how can I have toggle-navigation for lower resolutions than 768x1280? This is how the menu is created:
<nav class="navbar navbar-fixed-top" role="navigation">
<div class="container">
<div class="row col-xs-4">
<ul class="nav navbar-nav">
<li><img src="img/logo.png"></li>
</ul>
</div>
<div class="row col-xs-8" >
<div class="row col-xs-12">
<ul class="nav navbar-nav navbar-right">
<li> </li>
<li> </li>
</ul>
</div>
<div class="row col-xs-12">
<ul class="nav navbar-nav navbar-right" >
<li>Home</li>
<li>About Us</li>
<li><a href="#" >Projects</a></li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</nav>
I think that following example is ok for your needes:
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu2">
<span class="sr-only">Toggle navigation2</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<li><img src="img/logo.png"></li>
</div>
<div class="row col-xs-8 pull-right">
<div class="navbar-collapse collapse pull-right" id="menu1">
<ul class="nav navbar-nav">
<li> </li>
<li> </li>
</ul>
</div><!--/.nav-collapse -->
</div>
<div class="row col-xs-12 pull-right">
<div class="navbar-collapse collapse pull-right" id="menu2">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About Us</li>
<li><a href="#" >Projects</a></li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
You should add button like this where headerCol is id of your div which contains elements you want to collapse. I'm sorry for my bad english. I'll give you example:
This is my header navbar:
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#headerCol">
<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" href="index">MYSITE</a>
</div>
<div class="navbar-collapse collapse pull-right" id="headerCol"><!-- start nav-collapse -->
{% block headernav %}
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About us</li>
<li>Questions</li>
<li>Contacts</li>
</ul>
{% endblock %}
</div><!-- end nav-collapse -->
</div>
</div>
I don't think i've worded this properly so let me elaborate i'm trying to have my side navbar collapse into a button that functions as a top button navbar so this [actually nav-pills];
but collapses into this into the header tag:
on the top with this dropbox function.
currently my code has the dropdown occur where the sidebar would be
here's the code i'm using, Ive made no custom CSS adjustments other than color changes.
<header class="container">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<h1 class="brand">bootstrap</h1>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#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>
</nav>
</header>
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3"><!--aside-->
<aside>
<div class="collapse navbar-collapse" id="collapse">
<h4>Menu</h4>
<ul class="nav nav-pills nav-stacked">
<li>home</li>
<li>about</li>
<li>gallery</li>
<li>CV</li>
<li>link</li>
<li>Contact</li>
</ul>
</div>
</aside>
</div>
hope this makes sense thanks!
found the visible and hidden classes this worked
<header class="container"><!--header-->
<div class="row">
<div class="col-lg-12">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<h1 class="brand">John Doe</h1>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#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>
</nav>
</div>
</div>
<div class="collapse navbar-collapse" id="collapse">
<ul class="nav navbar-nav visible-xs">
<li>project 01</li>
<li>project 02</li>
<li>project 03</li>
<li>About</li>
<li>link</li>
<li>Contact</li>
</ul>
</div>
</header><!--header-->
<div class="container"><!--content area-->
<div class="row">
<aside class="col-lg-3 col-md-3 col-sm-3"><!--aside-->
<div class="collapse navbar-collapse" id="collapse">
<ul class="nav nav-pills nav-stacked hidden-xs">
<h4>Works</h4>
<li>project 01</li>
<li>project 02</li>
<li>project 03</li>
<li>About</li>
<li>link</li>
<li>Contact</li>
</ul>
</div>
</aside><!--aside-->