I'm trying to get brand-item and nav-items aligned on mobile view.
Mobile view --> Aling wrong. Not centered. "Brand" should be vertically aligned with "link1-3"
Desktop view --> Aling should be like this
I have tried different things without luck.
This is one of the things I tried but it didn't work.
My code atm: Codeply.com
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
Brand
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end nav-justified" id="navbarNav">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Link 1<span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Link 2</a>
<a class="nav-item nav-link" href="#">Link 3</a>
</div>
</div>
</nav>
What I need to do to get brand-item and nav-items aligned?
Edit1: Updated 1. image & Better description of what I'm trying to achieve.
Edit2: Solution found! Every answer I got solves my problem. But dmbaughman's answer is simplest and is not disturbing other content on the website.
The problem is that the .navbar-brand link is not as wide as the links below, because it shares space with the menu icon on the right. If you just make the menu icon absolutely positioned, it will be removed from the document flow and the brand/links will align properly.
Current
Add these styles to .navbar-toggler
.navbar-toggler {
position: absolute;
top: 8px;
right: 16px;
}
Result
Because you are using the mx-auto and it's working correctly the center between the start of screen and the button at the right it's a little before....see the jpeg you will see that now it's centered because i removed the button the mx-auto find the center between two elements....
SO at first look you can usee margin style in percentual and move a little the brand at right...
Bye
Do this resolve your problem?
change the a brand in this way
<span style="margin-left:50%">Brand</span>
The result
Related
I am new to coding and I appreciate this will be a very basic question. I am putting a very basic navbar together using Bootstrap 4. As per the documentation, I have been putting the logo image within an <a> tag and giving this tag the class of navbar-brand. My understanding is that when there is a logo item, it aligns left and the menu items i.e. links, align right by default.
In my case, I am using only a logo image and it all aligns correctly until I resize the screen to a smaller size and it changes to the navbar-toggler (which is what I want). When I do this though, the menu icon appears on the left, underneath the logo. I would like the toggler to appear on the right, as it appears in the bootstrap documentation. I have checked and there doesn't appear to be any padding or similar pushing it underneath it.
This is the code I have been using (the menu items are just placeholder for now while I get the functionality working)
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">
<img class="logo-img" src="media/HBS - Large Logo - Pink - Transparent Background.png" alt="" />
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon mr-auto"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<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="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a
>
</li>
</ul>
</div>
</nav>
I read a few other entries on here and someone had got around this by removing the <a> tag and applying the navbar-brand class to the image itself. When I do this, it works and the navbar-toggler aligns right as it should, only now the menu items when in large screen mode align-left alongside the logo.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<img class="logo-img navbar-brand" src="media/HBS - Large Logo - Pink - Transparent Background.png" alt="" />
It was always my understanding that the navbar-brand class and logo image should be held within an <a> tag? When there is no image and it's the only text for the navbar logo, all the alignment works fine, it's only when there is an image.
Sorry for what is a very basic question - I'm learning to code at the moment so I am keen that I am getting the fundamentals right rather than hacking around things. Thanks in advance.
EDIT 9-10-19: I gave the img tag a class of "logo" and moved the inline styles to the seperate style sheet, the Navbar links don't collapse to a toggle icon still.
I've been styling a bootstrap navbar with some success, but for some reason when I reduce the page size the navbar links don't collapse into a Toggle Icon, they just disappear.
I want the navbar links to disapear if the page gets too small but be replaced with a button that can be toggled to reveal the navbar links.
I've done a lot of looking and most of the problem solutions I've found involve making sure the div ids match, I'm pretty sure mine do, please help!
<nav class="navbar navbar-expand-md navbar-light">
<div class="container-fluid">
<a class="navbar-brand" href="#"><img src="img/darkiddlogostandalone.png" height="57px" width="200px"></a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Illustration</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Animation</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
I just want the links to condense into the toggle button on the right.
SO to answer my own question (sort of)
I went back to an earlier version of this bootstrap template I made when the hamburger toggler was working, and meticulously added the logo and styled the navbar over again because I found that reverting back to old stylesheets seemed to allow the hamburger to show up.
I found that styling using the bootstrap classes can be hit or miss, so I gave my logo img tag a class of "logo" and then went into the style sheet and
`position: absolute;
left: 0px;
top: 0px;
z-index: -1;`
I don't know if that's overkill to keep the logo on the top left of the fluid container that is the navbar, I was watching this tutorial https://www.youtube.com/watch?v=rgukBRi1CSU&t=594s
And although it was hard to understand the gentleman, he mentions getting rid of bg-light and navbar-light in order to make his navbar forrest green, I just wanted grey so I removed bg-light and added a class called "navback" and used that to style the background color...<nav class="navbar navbar-expand-md navbar-light sticky-top navback">
`.navback {
background-color: #A8A8A8;
}`
My logo was huge, and I was having a hard time getting it to reliably resize, so I made it 190x54px and that seemed to remove the need for styling it's size, and I think the logo itself was causing the problem, for whatever reason my styling of the navbar and the logo was getting in the way of the collapsing of the navbar links into the hamburger toggle button, but the above changes seemed to remedy the situation.
I have created a floating logo in Bootstrap 4 navigation, but unfortunately that breaks the "navbar-toggler button", this sould be right aligned on the right, but on small screens it comes under the logo on the right side...
Here the code that I have tried:
.navbar-brand {
position: absolute;
padding-top: 100px;
}
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand abs" href="#"><img src="assets/img/logo.png" alt=""></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar1" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbar1">
<ul class="navbar-nav text-right">
<li class="nav-item active">
<a class="nav-link" href="#">lorem<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">lorem</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Ipsum</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">lorem</a>
</li>
</ul>
</div>
</div>
</nav>
When you se position: absolute to an element
The element is removed from the normal flow of the document, without creating any space for the element in the outline of the page. It is positioned relative to its closest positioned ancestor, if there is one; otherwise, it is located relative to the initial container block . His final position is determined by the values of top, right, bottom, and left.
This value creates a new stacking context when the value of z-index is not auto. Absolutely positioned elements can have margin, and do not collapse with any other margin.
so when you set .navbar-brand {position: absolute;} it is removed the normal flow of the document and navbar-toggler is the 'only' child .container that has display: flex; and justify-content: space-between; (this is why navbar-toggler is on the right when you have other child inside .container).
to avoid the actual behavior you can do a lot of thing that depends on what are you expecting. try removing the position: absolute from the brand, adding more elements to the nav in order to get the toggle to the right, anyway the solution depends on what you want to achieve.
I hope I gave you an idea
I am using Bootstrap on my website. One of the things is the navbar. It works fine on desktop, iPhone etc., but on my iPad it looks like this (transparent background and white font):
What am I doing wrong?
I didn't use any CSS on it, so it's all Bootstrap's.
<nav class="navbar sticky-top navbar-toggleable-md navbar-inverse bg-inverse">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="index.html">Kev's Kitchen</a>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.html">Home </a>
</li>
<li class="nav-item active">
<a class="nav-link" href="about.html">About<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="meetTheChef.html">Meet the Chef</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</nav>
I see the problem. Just add
.navbar {display: block !important;}
to your CSS
You should start by cleaning up the header of your page. Accumulating all sorts of outdated garbage in your header is not exactly a smart idea...
Next step is to delete ALL contents of the app.css file and start using native Bootstrap classes to achieve what you want instead of manually overwriting everything. Native Bootstrap classes can get done pretty much everything you'll ever need.
P.S. It's always a bad idea to use the !important flag as suggested in the other answer. Using the !important flag suggests that you have no idea what you're doing. It is certainly not needed in this case.
Before you use this kind of stuff:
.container-fluid {
margin: 0;
padding: 0;
}
...you should learn about the Bootstrap grid and layout. Because then you'll realize that when you use Bootstrap the way it's intended to be used none of that custom css is necessary anymore.
I have a bootstrap 4 navbar like this:
<nav class="navbar navbar-light bg-faded navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<!-- Toggle Button -->
<button type="button" class="navbar-toggler hidden-md-up"
data-toggle="collapse"
data-target="#nav-content"
aria-expanded="false">
<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="#">THE VEGAN REPOSITORY</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-toggleable-md" id="nav-content">
<ul class="nav navbar-nav pull-xs-right">
<li class="nav-item">
<a class="nav-link" href="#home_page_footer">
<h5 class=" nav-item clickable white-text medium-text
right-text">
ABOUT
</h5>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#home_page_footer">
<h5 class=" nav-item clickable white-text medium-text
right-text">
BLOG
</h5>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://www.w3schools.com">
<h5 class=" nav-item clickable white-text medium-text
right-text">
LOGIN
</h5>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://www.w3schools.com">
<h5 id=" sign-in-button" class="nav-item clickable
medium-text right-text">
SIGN UP FREE
</h5>
</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<nav class="navbar navbar-light bg-faded">
<!-- Toggle Button -->
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#nav-content">
</button>
</nav>
I'd like to change the height of the navbar, but when I do, the links are no longer vertically centred.
70px
I have tried line-height, and flexbox options such as
nav {
background-color: $brand-red;
height:70px;
display: flex;
align-items: center;
}
which does:
my only css used for the whole navbar is this:
nav {
background-color: #fc4747;
height: 70px;
display: flex;
align-items: center; }
How do I vertically centre the navbar items if the navbar is 70px tall? The default height of a navbar is a bit smaller, around 50px.
So I figured I would address a few things here but first as to your question. If you just want to change the height of the navbar instead of adding a specific height to the nav you could just add extra padding to the navbar to give you your desired height and then you wouldn't have to change a bunch of css throughout the rest of the navbar. So doing this should give the navbar a height of 70px.
.navbar{padding:1rem}
Here is a fiddle of everything I address in this post in action Fiddle Demo
In this fiddle demo I have also added some responsive styles for stacking the navbar links at your collapse width.
Next If you are going to set a background color to the nav there is no reason to use the bg-faded class to the nav as this just gives you the background color for the nav so you can remove that class from your nav.
Then I see in your classes for your nav links you have a white-text class. If you want white text for your navbar your can just use the class of navbar-dark and this will give you lighter text for the navbar instead of using navbar-light. Just figured I would point that out.
Next In bootstrap 4 there is no navbar-header class so this is not necessary unless you are planning on custom styling something here. And the navbar-toggler button is different in bootstrap 4 there are no icon-bar spans they just use the html code for this now ☰
Note: Addressing a huge pet peeve of mine you have h5 tags in your navbar. Not sure why this is but I see people doing this a lot. H tags are supposed to be used in order from h1 down to h6 and are supposed to be directly related to the page that you are on and not for the entire site. If you have a good reason for this practice then by all means keep them there but I am not sure why I see people do this all of the time. To me it is a bad practice just figured I would address this.