I have a navigation bar with height changed to 2.5rem due to which the toggler is not displaying any menu items. If I change is back to default it works fine. Right now the icon appears as below -
Please help me fix this.
Below is my code -
HTML -
<body>
<nav class="navbar navbar-expand-lg " id="header-bar">
<button class="navbar-dark navbar-toggler" type="button" data-
toggle="collapse"
data-target="#navbarSupportedContent" aria-
controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">ITEM1 <span class="sr-only">
(current)</span></a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">ITEM2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ITEM3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ITEM4</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ITEM5</a>
</li>
</ul>
</div>
</nav>
CSS -
*{
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: sans-serif;
font-size: 16px;
}
nav {
background:#001a33;
height: 2.5rem;
}
.navbar-nav .nav-link{
color: white;
}
Thanks in advance !
Adding py-0 class to the nav tag solves the problem (to adjust height of the navbar). Changing height attribute messes with the hamburger content alignment-that has to be removed.
Related
I am learning how to code with html and am trying to create a navbar to have some li on the right side and some on the left. Using bootstrap I can seem to find out how to move contact and only contact to the right side of my navbar. Does anyone know how to do that? I tried looking at other answers on this site and cant figure it out. Would I have to make the last one its own ul?
I have tried using float right and justify content end but it only works in the ul class and moves everything over. Same with ms-auto. If I put it down in the li class nothing changes. I have tried adding padding too but nothing moves. I just want to know how to move contact to the right side of my navbar and thats it not the About, My Account, and Login. Please ignore my html file names I know I have to update them.
Here is my code:
` <nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="images/circle_r.png" width="30" height="30" alt="">
</a>
<button class="navbar-toggler" 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>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home </span></a>
</li>
<li class="nav-item float-left">
<a class="nav-link" href="tenant.html">Login/Sign-Up</a>
</li>
<li class="nav-item">
<a class="nav-link" href="proprietor.html">My Account</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</nav>`
You can move the "Contact" link to the right side of the navbar by adding a class to the ul element and using CSS to align the elements. Here's one way to do it:
Add a class to the ul element, for example: . The ml-auto class is from Bootstrap and will align the elements to the right.
Add a CSS rule to your stylesheet to change the justify-content property of the class you added to the ul element. For example:
.ml-auto {
justify-content: flex-end;
}
Your updated code would look like this:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="images/circle_r.png" width="30" height="30" alt="">
</a>
<button class="navbar-toggler" 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>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home </span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="tenant.html">Login/Sign-Up</a>
</li>
<li class="nav-item">
<a class="nav-link" href="proprietor.html">My Account</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</nav>
You can apply position: absolute; to move the element to the right side of the navbar. I added a class contact to the li element so that css can be applied. Give the parent position: relative; as that will be the container the contact li is being responsive to. You can ignore the flex css as that was mainly for me to quickly align the links in a row. You can adjust the padding and spacing as needed.
.navbar-nav {
display: flex;
gap: 2rem;
background: lightgrey;
position: relative;
}
.nav-item {
list-style-type: none;
}
.contact {
position: absolute;
right: 0;
top: 0;
padding-right: 1rem;
}
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home </span></a>
</li>
<li class="nav-item float-left">
<a class="nav-link" href="tenant.html">Login/Sign-Up</a>
</li>
<li class="nav-item">
<a class="nav-link" href="proprietor.html">My Account</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item contact">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
I am trying to learn Bootstrap. I took the example navbar from the documentation, which is:
<nav class="navbar navbar-expand-lg navbar-light bg-primary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<div>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
Then I added this to my CSS file:
.navbar-collapse {
background-color: #fff;
}
However, the width of the collapse menu isn't 100% of the screen so the left and right side of the collapse menu do not change when I do this. I can remove the padding of the whole navbar but that messes up everything and I feel like there should be an easier way to do this. Is there really or should I just suck it up and adjust everything separately after removing the padding?
The easiest way would be to add a negative margin and then counteract with padding...
.navbar-collapse {
background-color: #fff;
margin-left: -15px;
margin-right: -15px;
padding-left: 15px;
padding-right: 15px;
}
Demo
I am trying to create a navbar overtop a carousel. The navbar should have two sets of links;
1: Links aligned to the left
2: Social media links aligned to the right
I have have done this successfully with the code below;
HTML
<nav class="navbar navbar-expand-lg navbar-light bg-light" id = "navigation">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">GALLERIES <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ABOUT</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="navbar-brand" href="#">
<img src="images/icons/shopping-cart.png" class = "nav_icon" alt = "">
</a>
</li>
<li class="nav-item">
<a class="navbar-brand" href="#">
<img src="images/icons/twitter.png" class = "nav_icon" alt = "">
</a>
</li>
</ul>
</div>
</nav>
CSS
#navigation{
z-index: 999;
background:0 !important;
font-size: 1.5vw;
color: #fff !important;
/*position: absolute;*/
}
.nav_icon{
width: 2vw;
height: 2vw;
}
This yields the following result;
However, I want the navbar to be overtop my carousel (code for the carousel not included).
Adding 'position: absolute' interferes with my alignment like so;
Why is this happening? How can I get the same results without messing up the alignment of the links?
I am using bootstrap to create my navbar but I am having a problem.
My brand img and brand img is not aligned with my pages names...
I would like the brand img and name Ghiro to be aligned with "Home" "Products" "Services" "About us".
This is my HTML:
<nav class="navbar navbar-expand-lg brand-colors">
<a class="navbar-brand" href="/">
<img src="../../assets/images/ghiro-logo-no-shadow.png" width="50" height="50">
<h5 class="navbar-brand">Ghiro</h5>
</a>
<button class="navbar-toggler custom-toggler" 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>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item" routerLinkActive="active">
<a class="nav-link" routerLink="/home">Home</a>
</li>
<li class="nav-item">
<a routerLinkActive="active" class="nav-link" routerLink="/products">Products</a>
</li>
<li class="nav-item" routerLinkActive="active">
<a class="nav-link" routerLink="/services">Services</a>
</li>
<li class="nav-item" routerLinkActive="active">
<a class="nav-link" routerLink="/about-us">About us</a>
</li>
</ul>
</div>
</nav>
I am new at programming and could not fix this. If anyone can help me I appreciate.
I am building this website for a friend and I am going to use as my portfolio at the end.
I will post on my github and put the website live.
Thank you!
To change the style of your website you have to use css. To do that there are 2 different options, first you create a new file and link it in your tag in your html file or second write it directly in your "html code" (also in tag). Here an example of the second method:
<head>
<!-- Here is your css code -->
<style>
body{
margin: 0;
padding: 0;
font-family: sans-serif; /* here you can set your favorite font family */
}
nav{
background-color: white; /* set the background color in your navbar to white */
padding-top: 10px;
min-height: 70px;
border-bottom: black 3px solid; /* if you want to have a border under your navbar */
align-items: center;
}
.nav-item{
margin: 0;
padding: 20px;
display: inline-block; /* brings all of your li (nav-item) in one line */
list-style: none;
float: right;
}
.navbar-brand{
float: left;
}
h5{
padding-right: 50px;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg brand-colors">
<a class="navbar-brand" href="/">
<img src="../../assets/images/ghiro-logo-no-shadow.png" width="50" height="50">
<h5 class="navbar-brand">Ghiro</h5>
</a>
<button class="navbar-toggler custom-toggler" 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>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item" routerLinkActive="active">
<a class="nav-link" routerLink="/home">Home</a>
</li>
<li class="nav-item">
<a routerLinkActive="active" class="nav-link" routerLink="/products">Products</a>
</li>
<li class="nav-item" routerLinkActive="active">
<a class="nav-link" routerLink="/services">Services</a>
</li>
<li class="nav-item" routerLinkActive="active">
<a class="nav-link" routerLink="/about-us">About us</a>
</li>
</ul>
</div>
</nav>
</body>
try this one and test some things in the " part" to customize it, I just don't want to do the whole stuff, this is just to give you some idea.
I have a navbar on my page but for some reason only the 'homepage' link is pure white. the rest of the links are not as bright. I am trying to create a transparent navbar with a picture as a background. i have managed to do that but the 'Home' link is considerably brighter and more prominent then the rest of the links. the image can be seen below:
<div class="container-fluid p-0">
<nav class="navbar navbar-expand-lg fixed-top navbar-dark">
<a class="navbar-brand" href="#">
<i class="fas fa-mountain fa-2x mx-3"></i>Greatness</a> <!--This is the icon for the brand-->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false"
aria-label="Toggle navigation">
<i class="fas fa-align-right text-light"></i>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<div class="mr-auto"></div>
<ul class="navbar-nav justify-content-center">
<li class="nav-item active">
<a class="nav-link" href="indexHome.html">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="AboutUs.html">ABOUT US
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">IDEAS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">MOTIVATION</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">LOG IN</a>
</li>
</ul>
</div>
</nav>
</div>
CSS
.nav-item:last-child{
padding-right: 10.5em;
}
.nav-item{
padding: 0.9em;
color: white;
font-size: 17px;
}
.navbar-brand{
padding-left: 8em;
}
It is because an active class is defined in the li which is wrapped around it, like <li class="nav-item active">. Add the active class to its siblings and it should work.