I've followed this post accepted answer to vertical align my navbar links with my logo.
But my SignIn link also follow the vertical size and span to the full 50px of the navbar height:
How can I set a normal height to my Sign In button?
Thanks.
HTML:
<!-- /navbar -->
<nav class="navbar navbar-static-top bg-faded">
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#navbar-header"
aria-controls="navbar-header">
☰
</button>
<!-- Logo -->
<a class="navbar-brand" href="/en/">
<img class="img" height="50px" src="/static/images/logo.png"/>
</a>
<div class="collapse navbar-toggleable-xs" id="navbar-header">
<ul class="nav navbar-nav">
<!-- logged-in nav items -->
<!-- <a class="nav-item nav-link " href="/en/product/">Product</a> -->
<!-- <a class="nav-item nav-link " href="/en/pricing/">Pricing</a> -->
<!-- <a class="nav-item nav-link " href="/en/clients/">Clients</a> -->
<a class="nav-item nav-link " href="/en/about/">About Us</a>
</ul>
<!-- to designers: I am not sure about the 'float: right' style -->
<ul class="nav navbar-nav" style="float: right">
<!-- ... -->
<a class="nav-item btn btn-primary" href="/en/accounts/login/">Sign In</a>
</ul>
</div>
</nav>
And CSS:
.navbar {
background-color: white;
border-bottom-color: lightgray;
border-bottom-style: solid;
border-bottom-width: thin;
}
.nav-item {
line-height: 50px;
}
You are applying the CSS class nav-item which sets line-height: 50px to "Sign in" button. Simply remove it like so:
<a class="btn btn-primary" href="/en/accounts/login/">Sign In</a>
That will make the button height normal. But you ll still have to add something like a top margin to vertically align the button with other links and logo.
.navbar-nav .btn {
margin-top: 10px; // Adjust the actual number of pixels accordingly
}
However you HTML code is also no quite valid. If the hackish code was not intentional you should refer Bootstrap Docs to correctly apply their HTML structures and CSS classes.
Related
We are having trouble with our responsive navigation covering content.
When the user toggles the navigation button, we want it to push the H1 and down the screen. I am thinking that our css for the body is effecting this. I cannot think of a decent solution for this, but I have considered having the navigation have a background, but it will still cover our "Denver Moving and Storage" content.
We're still learning how to use stackoverflow and we're thankful for any help you guys may be able to offer.
html,body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
This is our code:
<!-- container with bg img -->
<div class="cover">
<div class="container">
<!-- NAV Here -->
<nav class="navbar navbar-expand-sm navbar-dark d-flex" aria-label="responsive navbar">
<a class="navbar-brand" href="index.html"><img src="img/the-other-side-moving-storage-color-white.png" width="75%" height="75%"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#responsive-navbar" aria-controls="responsive-navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="responsive-navbar">
<ul class="navbar-nav me-auto mb-2 mb-sm-0">
<li class="nav-item">
<a class="nav-link" href="denver-moving-services.html">Moving</a>
</li>
<li class="nav-item">
<a class="nav-link" href="denver-storage-company.html">Storage</a>
</li>
<li class="nav-item">
<a class="nav-link" href="receiving-and-delivery.html">Furniture Delivery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about-us.html">About</a>
</li>
<li class="nav-item">
<button class="btn btn-tosa" type="submit">Free Estimate</button>
</li>
</ul>
</div>
</nav>
<!-- Nav end -->
</div>
<!-- FS Hero -->
<div class="container-xl mb-4">
<div class="row text-center">
<div class="col-12">
<h1 class="py-5">Denver Moving and Storage</h1>
<button type="button" class="btn btn-tosa mx-3">Free Estimate</button>
<button type="button" class="btn btn-outline-tosa mx-3">Our Story</button>
</div>
</div>
</div>
<!-- End FS Hero -->
</div>
<!-- End Cover -->
I don't know if your body CSS is affecting it or not, since you didn't post that out. But just by looking at your HTML, I see something wrong with your button toggler:
<button ... data-bs-toggle="collapse" data-bs-target="#responsive-navbar" />
Where did you get this kind of syntax from? In Bootstrap documentation, there is no -bs on the data attribute.
In order for the toggler to work properly, you need to remove -bs.
Minor improvement
Your "free estimate" button. Bootstrap has a button style to make an anchor tag look like a button. You don't need to wrap a button with an anchor tag. You can change it to something like:
<li class="nav-item">
<a class="btn btn-success" href="free-estimate.html">Free Estimate</a>
</li>
demo: https://jsfiddle.net/davidliang2008/p4ofdcae/8/
Apologies if this has been asked before (I'm new to all of this and very much still learning, hard to find the answer on search).
I'm trying to have a collapsible navbar that when expanded, has the items separated by | (can be border right instead), but when collapsed and in a hamburger button the '|' separators do not appear.
At the moment they appear, code below, links to pictures:
Collapsed view (want to remove the '|':
expanded view (want to keep the '|' or at least, something that looks the same):
<nav class="navbar navbar-expand-md navbar-dark sticky-top">
<button class ="navbar-toggler" type ="button" data-toggle ="collapse" data-target ="#navvy">
<span class ="navbar-toggler-icon"></span>
</button>
<div class ="collapse navbar-collapse navbar" id ="navvy">
<ul class ="navbar-nav">
<li class="nav-item white"><a class="nav-link active navbar-brand " id ="Overview" href ="overviewpage">Overview</a>|
</li>
<li class="nav-item white"><a class="nav-link active navbar-brand " id ="CS50-nav" href ="cs50page" style="border-bottom: solid 1px white">CS50</a>|
</li>
<li class="nav-item"><a class="nav-link active navbar-brand " id = "Portfolio" href ="Portfoliopage">Portfolio</a>
</li>
</ul>
</div>
</nav>
Thanks for any and all help!
You could add a couple of rules with media query. For example in this snippet I added some borders right just in the desktop version.
You could even use bootstrap helper classes to display elements just in mobile or just in desktop view. Take a look at https://getbootstrap.com/docs/4.0/utilities/display/#hiding-elements
I hope this could help! 😀
#navvy>ul.navbar-nav>li {
display: inline-block;
width: 100%;
}
/* Desktop versions*/
#media (min-width: 1025px) {
#navvy>ul.navbar-nav>li {
width: initial;
list-style-type: none;
}
#navvy>ul.navbar-nav>li>a {
border-right: 1px solid #666;
padding-right: 1em;
margin-right: 1em;
}
#navvy>ul.navbar-nav>li:last-child>a {
border-right: 0;
}
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-md navbar-dark sticky-top">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navvy">Menu</button>
<div class="collapse navbar-collapse navbar" id="navvy">
<ul class="navbar-nav">
<li class="nav-item white"><a class="nav-link active navbar-brand " id="Overview" href="overviewpage">Overview</a>
</li>
<li class="nav-item white"><a class="nav-link active navbar-brand " id="CS50-nav" href="cs50page" style="border-bottom: solid 1px white">CS50</a>
</li>
<li class="nav-item"><a class="nav-link active navbar-brand " id="Portfolio" href="Portfoliopage">Portfolio</a>
</li>
</ul>
</div>
</nav>
Please help, it's driving me crazy (it's insane that I have spent so much time on the navbar text color overall).
I'm just learning web development so I just figured out how to change the text color in my navbar and now it turns an ugly blue when I hover over it. How do I figure out how to fix that?
I know others have asked this before but they all get specific answers that don't apply to my code and I don't understand why the solutions work, so I could figure it out by myself.
Thanks for your help!
<!--Navbar-->
<nav class="navbar navbar-expand-lg yellow lighten-3 fixed-top scrolling-navbar">
<div class="container">
<!--center the navbar content-->
<!-- Navbar brand -->
<a class="navbar-brand navbar-text-color-custom" href="#">Pawsitive Lead</a>
<!-- Collapse button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav"
aria-controls="basicExampleNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Collapsible content -->
<div class="collapse navbar-collapse" id="basicExampleNav">
<!-- Links - each sends you to the specific section of the page -->
<ul class="navbar-nav mr-auto smooth-scroll">
<li class="nav-item">
<a class="nav-link navbar-text-color-custom" href="#intro">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link navbar-text-color-custom" href="#best-features">Kdo smo?</a>
</li>
<li class="nav-item">
<a class="nav-link navbar-text-color-custom" href="#examples">Izkušnje</a>
</li>
<li class="nav-item">
<a class="nav-link navbar-text-color-custom" href="#gallery">V razmislek</a>
</li>
<li class="nav-item">
<a class="nav-link navbar-text-color-custom" href="#contact">Pišite nam</a>
</li>
</ul>
<!-- Links -->
<form class="form-inline">
<div class="md-form my-0">
<input class="form-control mr-sm-2" type="text" placeholder="Išči" aria-label="Search">
</div>
</form>
</div>
<!-- Collapsible content -->
</div>
</nav>
<!--/.Navbar-->
You can approach it by different ways ..
define a separate class in a separate css stylesheet and override the color by using !important :
e.g : make a class newClass in newCss.css
.newClass:hover{
color: red !important; /*red is an example, put whatever you want*/
}
define a style tag in the html :
<style>
.newClass:hover{
color: red !important; /*red is an example, put whatever you want*/
}
</style>
in HTML , put the class inside the anchor:
<li class="nav-item">
<a class=" newClass nav-link navbar-text-color-custom" href="#best-features">Kdo smo?</a></li>
By using !important you ensure that the css color red is applied to the anchor.
This question already has answers here:
Bootstrap align navbar items to the right
(24 answers)
Closed 3 years ago.
I'm using bootstrap classes and I need the logo to be in the left but nav items at the right.
To be responsive as well.
https://imgur.com/zL8LrTG
navbar now
<!-- Logo -->
<a class="navbar-brand" href="#">
<img class="img-fluid" src="images/header-logo.png" alt="logo">
</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Nav items -->
<div class="collapse navbar-collapse" id="collapsibleNavbar"> <!-- Collapse navbar -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
You can add ml-auto to your ul class, which gives your ul a margin-left of auto. It will look like this:
<ul class="navbar-nav ml-auto">
You can use float right to move nav bar right side
#collapsibleNavbar{
float: right;
margin: 0 10px 0 0;
}
You can try this:
// CSS code
nav #collapsibleNavbar{
width: n%; // n = o que achar melhor
margin: n n;
display: block;
}
nav #collapsibleNavbar .navbar-nav{
display: block;
width: auto; // or what You think is better for your project
margin: n n;
float: right;
}
I think you can try that and to encapsulate in a div your Logo and Toggler/collapsibe Button, setting div to float left. Maybe you'll need add some "!important".
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.