I have this simple code in HTML using Bootstrap classes to create a navigation bar. I want my navigation bar to be horizontal so I added the navbar-inverse class. However, my navigation bar keeps showing vertical and I can't figure out why it does that even thought I tried different things to fix it.
<div class="blog-masthead">
<div class="container">
<nav class="navbar navbar-inverse">
<ul class="nav navbar-nav">
<li class="nav-item"><a class="blog-nav-item active" href="#">Home</a></li>
<li class="nav-item"><a class="blog-nav-item" href="#">New features</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="nav-item"><a class="blog-nav-item" href="#">{{ Auth::user()->name }}</a></li>
</ul>
</nav>
</div>
</div>
I hope navbar-inverse is nothing to do with menu view style I hope it's used to change the color of the menu text and for the view style you should use nav-link in a tag and nav-toggleable in nav tag I hope it's the answer.
I'm sorry if I misunderstood your question
<ul class="nav navbar-nav ">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#">New features</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="nav-item"><a class="nav-item" href="#">{{ Auth::user()->name }}</a></li>
</ul>
</nav>
</div>
Related
I'm working on a internal website for the company I work for and my manager wants me to have the Menu as a jsp include page instead of it being coded into the page like this(which works).
<head>
<title>SomeCompany Intranet</title>
<jsp:include page="/jsp/head.jsp"/>
</head>
<body style="min-height: 75rem; padding-top:110px;">
<jsp:include page="/jsp/header.jsp"/>
<div class="sidenav">
<div class="nav flex-column nav-pills" aria-orientation="vertical">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link disabled">Marketing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="${pageContext.request.contextPath}/jsp/marketing/AA.jsp">Agent Access</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="${pageContext.request.contextPath}/jsp/marketing/ItemsCatalog.jsp">Promotional Items Catalog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="${pageContext.request.contextPath}/jsp/marketing/OrderForm.jsp">Catalog Order Form</a>
</li>
<li class="nav-item">
<a class="nav-link" href="${pageContext.request.contextPath}/jsp/marketing/TravelForm.jsp">Travel Form</a>
</li>
<li class="nav-item">
<a class="nav-link" href="${pageContext.request.contextPath}/jsp/marketing/TuitionAssi.jsp">Tuition Assistance Form</a>
</li>
</ul>
</div>
</div>
<div class="mainHeader">
<h1>PROMOTIONAL ITEMS CATALOG</h1>
</div>
<div class="tab-content main1">
<iframe src="${pageContext.request.contextPath}/pdf/PromotionalCatalog 01-20.pdf" width="100%"
height="100%"></iframe>
</div>
He wants it to look more like this.
<head>
<title>SomeCompany Intranet</title>
<jsp:include page="/jsp/head.jsp"/>
</head>
<body style="min-height: 75rem; padding-top:110px;">
<jsp:include page="/jsp/header.jsp"/>
<div class="sidenav">
<jsp:include page="/jsp/marketing/TestMenu.jsp"
</div>
<div class="mainHeader">
<h1>PROMOTIONAL ITEMS CATALOG</h1>
</div>
<div class="tab-content main1">
<iframe src="${pageContext.request.contextPath}/pdf/PromotionalCatalog 01-20.pdf" width="100%" height="100%"></iframe>
</div>
</body>
This is the TestMenu.jsp
<div class="nav flex-column nav-pills" aria-orientation="vertical">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link disabled">Marketing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="${pageContext.request.contextPath}/jsp/marketing/AA.jsp">Agent Access</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="${pageContext.request.contextPath}/jsp/marketing/ItemsCatalog.jsp">Promotional Items Catalog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="${pageContext.request.contextPath}/jsp/marketing/OrderForm.jsp">Catalog Order Form</a>
</li>
<li class="nav-item">
<a class="nav-link" href="${pageContext.request.contextPath}/jsp/marketing/TravelForm.jsp">Travel Form</a>
</li>
<li class="nav-item">
<a class="nav-link" href="${pageContext.request.contextPath}/jsp/marketing/TuitionAssi.jsp">Tuition Assistance Form</a>
</li>
</ul>
</div>
My nav pills go active but they don't take me to the actual pages. But if I remove the active from the TestMenu the links work. It's such a small thing that I'm trying to accomplish which is highlighting the proper pills and I just need help figuring it out. Or at least point me in the right direction.
Even though I'm in the 2020 Corporate Calendar page it shows Project Team Guidelines highlighted.
I'm trying to add nav-pills to tag but it's not working, why?
I really tried everything but nothing works!
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link" href="dashboard.php">Dashboard</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Add New Post</a>
</li>
</ul>
Pills require the active class.
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link active" href="">Dashboard</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Add New Post</a>
</li>
</ul>
https://www.codeply.com/go/xrln5uphko
I'm trying to display the username of the logged in user in my application in Bootstrap 4 navbar. However, it's displayed out of vertical alignment with other elements.
Here's the example:
<nav class="navbar navbar-light bg-faded">
<a class="navbar-brand" href="#">Brand Name</a>
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Foo</a>
</li>
</ul>
<ul class="nav navbar-nav pull-xs-right">
<li class="nav-item">
<span>email#example.com</span>
</li>
</ul>
</nav>
The resulted E-Mail address is displayed top-right, however I want it to be displayed middle-right.
Add the class .nav-link to the span and then style the color of it accordingly like so:
Here is a fiddle Fiddle Demo
.navbar-light .navbar-nav span.nav-link,
.navbar-light .navbar-nav span.nav-link:hover,
.navbar-light .navbar-nav span.nav-link:focus{
color:rgba(0,0,0,0.8);
}
It should look like the following:
<nav class="navbar navbar-light bg-faded">
<a class="navbar-brand" href="#">Brand Name</a>
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Foo</a>
</li>
</ul>
<ul class="nav navbar-nav pull-xs-right">
<li class="nav-item">
<span class="nav-link">email#example.com</span>
</li>
</ul>
</nav>
Or you can keep your markup and style the span youself whichever you like
.navbar-nav span {
display: block;
padding-top: .425rem;
padding-bottom: .425rem;
}
You have to remove the class pull-xs-right so :
<ul class="nav navbar-nav pull-xs-right">
<li class="nav-item">
<span>email#example.com</span>
</li>
</ul>
Should be :
<ul class="nav navbar-nav">
<li class="nav-item">
<span>email#example.com</span>
</li>
</ul>
Or use one ul tag like :
<nav class="navbar navbar-light bg-faded">
<a class="navbar-brand" href="#">Brand Name</a>
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Foo</a>
</li>
<li class="nav-item">
<span>email#example.com</span>
</li>
</ul>
</nav>
Hope this helps.
Try navbar-text to li like this
<nav class="navbar navbar-light bg-faded">
<a class="navbar-brand" href="#">Brand Name</a>
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Foo</a>
</li>
</ul>
<ul class="nav navbar-nav pull-xs-right">
<li class=" nav-item navbar-text">
<span>email#example.com</span>
</li>
</ul>
</nav>
see example here
This is probably very simple, but the answer seems to be eluding me. I have tried several combinations using navbar-text, but most of them end up putting the text either above or below another navbar item. I would like the text to be located just to the left of the "Sign In" link.
Here is what I have now:
<nav class="navbar navbar-fixed-top navbar-dark bg-inverse">
<a class="navbar-brand" href="#">Sample App</a>
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
<div class="nav navbar-nav pull-md-right">
<div class="nav nav-item">
<p class="navbar-text">Signed in as User#1234</p>
</div>
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Sign In</a>
</li>
</ul>
</div>
</nav>
That ends up looking like this:
Many thanks in advance.
I think it is because of the div block here:
<div class="nav nav-item">
<p class="navbar-text">Signed in as User#1234</p>
</div>
A div is always displayed as a block element and thats the reason why it will start a new line below the div block. If you put the item as a part of the list tag then it should work. For example:
<div class="nav navbar-nav pull-md-right">
<ul class="nav navbar-nav">
<li class="nav-item">
<p class="navbar-text">Signed in as User#1234</p>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Sign In</a>
</li>
</ul>
</div>
I have a Bootstrap 3 Navbar that has two right-justified <ul> sections which gives me this:
When the menu is collapse for mobile, I get this:
I have two questions related to the collapsed menu. 1) How can I get the buttons to appear at the bottom of the collapsed menu instead of the top? 2) How can I change the styling of the buttons in the collapsed menu (without affecting the style in the horizontal menu)?
Below is the markup for this Navbar. And yes I have a reason for having two separate <ul> sections:
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
My Site
</div>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li>Button One</li>
<li>Button Two</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
</ul>
</div>
</div>
</div>
I ended up finding a simpler solution for the reformatting and reordering of the button links on the collapsed navbar, one that doesn't require new javascript code:
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right hidden-xs">
<li>Button One</li>
<li>Button Two</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
</ul>
<ul class="nav navbar-nav visible-xs">
<li><a href="#" >Button One</a></li>
<li><a href="#" >Button Two</a></li>
</ul>
</div>
I simply duplicated the Button One and Button Two <ul> section and added it to the bottom. I then removed the classes and ID on the <a> links so that no button formatting would occur. Finally, I added the hidden-xs bootstrap class to the top <ul> and visible-xs to the bottom <ul> class. That did the trick:
I ran into a similar issue but have been using Bootstrap 4.4 and this can be solved with a simple d-none d-block solution.
<ul class="nav justify-content-center">
<li class="nav-item d-sm-none d-md-block">
<a class="nav-link" href="#">Item 1</a>
</li>
<li class="nav-item d-sm-none d-md-block">
<a class="nav-link" href="#">Item 2</a>
</li>
<li>
<li class="nav-item">
<a class="nav-link" href="#">Item 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 4</a>
</li>
<li class="nav-item d-none d-sm-block d-md-none">
<a class="nav-link" href="#">Item 1</a>
</li>
<li class="nav-item d-none d-sm-block d-md-none">
<a class="nav-link" href="#">Item 2</a>
</li>
</ul>
Using this method allows for items 1 and 2 to only appear after the display is set to small and below. While also hiding the originals at that same display size.