I have this navigation
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<a class="navbar-brand" href="#">Home</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link text-dark" href="#">Page 1</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="#">Page 2</a>
</li>
</ul>
</nav>
How can I bring the list items ul on the right site?
I do not want to change the direction. I want to move the complete ul item on the right site
when run the html code all thing is fine but you can try different ways
for examples:
<nav class="navbar mr-auto navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<a class="navbar-brand" href="#">Home</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link text-dark" href="#">Page 1</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="#">Page 2</a>
</li>
</ul>
or set direction for ul like this <ul class="navbar-nav" style="direction: ltr">
or set style in css for ul tag :
ul {
display: flex;
justify-content: flex-start;
align-items: center;
}
Related
I'm trying to male that when you hover a "home" it will be a different color. Could someone please help me? Thank you!
<header class = "header">
<nav class="navbar navbar-expand-lg navbar-fixed-top navbar-light bg-light;">
<div class="container-fluid">
<div class="collapse navbar-collapse justify-content-between" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="#" style="color:#b38b40;">Home</a>
</li>
</ul>
</div>
</div>
You need to move your inline style="" attributes to a separate stylesheet .css or <style> element because you cannot define :hover rules in inline style="" attributes and inline styles takes precedence over rules from a stylesheet.
header.header > nav ul > li > a {
color: #b38b40;
}
header.header > nav ul > li > a:hover {
color: red;
}
<header class = "header">
<nav class="navbar navbar-expand-lg navbar-fixed-top navbar-light bg-light;">
<div class="container-fluid">
<div class="collapse navbar-collapse justify-content-between" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Away</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Life</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Is Short</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">And Love</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Is Always Over</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">In the Morning</a>
</li>
</ul>
</div>
</div>
You have 3 options,
create a new file - only for css, and put a link to the File from the HTML page.
write in the right row, style = "your style".
On the HTML page, write the label style
I developed a header using bootstrap 4.5
<nav class="navbar navbar-expand-sm navbar-light">
<!-- Brand -->
<a class="navbar-brand" href="#">
<img src="logo.png">
</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"
aria-controls="collapsibleNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<!-- Left -->
<ul class="navbar-nav left-menu mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Item1</a>
</li>
<li class="nav-item item-menu">
<a class="nav-link" href="#">Item2</a>
</li>
<li class="nav-item item-menu">
<a class="nav-link" href="#">Item3</a>
</li>
</ul>
<!-- Right -->
<ul class="navbar-nav ml-auto right-menu">
<li class="nav-item active">
<a class="nav-link" href="#">Item4</a>
</li>
<li class="nav-item item-menu">
<a class="nav-link" href="#">Item5</a>
</li>
<li class="nav-item item-menu">
<a class="nav-link" href="#">Item6</a>
</li>
</ul>
</div>
For the tablet I want to change the arrangement of the elements as follows :
I
I use media query :
#media (max-width: 991.98px) { ... }
But i dont know how can I transform left menu (mr-auto) to be bellow the menu.
Thank you !
What you're looking for is the bootstrap's class order-X where x is the order of the element.
With your current markup, you can add an order on mobile, then change it on desktop.
Note that you could change the markup to only change the order on desktop.
Step 1:
Define the order of the element
Logo will always have order-1
Left menu will have order-3 by default then order-md-2.
Right menu will always have order-2.
Step 2:
Define the width of Left menu
Width 100 by default col-12.
Width auto later on col-md-auto.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="navbar">
<img src="//via.placeholder.com/150" class="order-1" alt="">
<ul class="navbar-nav left-menu mr-auto order-3 order-md-2 col-12 col-md-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Item1</a>
</li>
<li class="nav-item item-menu">
<a class="nav-link" href="#">Item2</a>
</li>
<li class="nav-item item-menu">
<a class="nav-link" href="#">Item3</a>
</li>
</ul>
<!-- Right -->
<ul class="navbar-nav ml-auto right-menu order-2">
<li class="nav-item active">
<a class="nav-link" href="#">Item4</a>
</li>
<li class="nav-item item-menu">
<a class="nav-link" href="#">Item5</a>
</li>
<li class="nav-item item-menu">
<a class="nav-link" href="#">Item6</a>
</li>
</ul>
</div>
use negative margin on right-menu in media queries.
#media only screen and (min-width: 768px) and (max-width: 991px) {
.navbar {
flex-direction: column;
align-items: end;
}
.navbar-collapse, .left-menu {
width: 100%;
}
.right-menu {
margin-top: -80px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-md navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<!-- Left -->
<ul class="navbar-nav left-menu mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Item1</a>
</li>
<li class="nav-item item-menu">
<a class="nav-link" href="#">Item2</a>
</li>
<li class="nav-item item-menu">
<a class="nav-link" href="#">Item3</a>
</li>
</ul>
<!-- Right -->
<ul class="navbar-nav ml-auto right-menu">
<li class="nav-item active">
<a class="nav-link" href="#">Item4</a>
</li>
<li class="nav-item item-menu">
<a class="nav-link" href="#">Item5</a>
</li>
<li class="nav-item item-menu">
<a class="nav-link" href="#">Item6</a>
</li>
</ul>
</div>
</nav>
Create two "left menu".
Set "display:none" to the left menu near the logo when max width less than 991px and
set "display:block" to the second menu which is down to the logo.
Do the 2nd method in reverse to display the first menu and hide the second menu.
Use media query to do this responsive method.
I have already defined my Navbar and it works perfectly fine, except I want to give a full page background to the Navbar links as well. Currently when I want to open the page on a mobile device, the links background doesn't cover the whole page horizontally, but instead it looks like a highlighted line. For more detail see the screenshots. I would appreciate if someone can help me with this. Thanks!
<nav class="navbar navbar-expand-sm navbar-dark fixed-top">
<a class="navbar-brand" href="#backrondimage"><img src="img/homepage.png" alt="" class="hompagecover"></a>
<button class="navbar-toggler ml-auto custom-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar4">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsingNavbar4">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#div1" class="navbaritems"> Portfolio </a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#div2" class="navbaritems">About</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#div3" class="navbaritems">Contact</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#div4" class="navbaritems">Resume</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item active">
<img src="img/email.png" style="width:35px;height:35px;border-radius:25px;">   
</li>
<li class="nav-item active">
<img src="img/linkedin.png" style="width:35px;height:35px;border-radius:25px;">   
</li>
<li class="nav-item active">
<img src="img/twitter.png" style="width:35px;height:35px;border-radius:25px;">   
</li>
</ul>
</div>[![enter image description here][1]][1]
</nav>
You could try this:
<nav class="navbar navbar-expand-sm navbar-light fixed-top p-0">
Try adding the below style:
.navbar.scrolled .navbar-collapse{
background: #116980;
margin: -15px;
padding: 15px;
z-index: -1;
}
The above lines would assign background color to .navbar-collapse when scrolled down. However since .navbar-collapse contains margin, the above code would remove the margin and change it to padding while move .navbar-collapse to back to prevent it from covering .navbar-brand and .navbar-toggler.
On clicking on the below link, you will see that the navbar gets stacked vertically one above another in a mobile. I want it to be in one single line in the same mobile.
http://www.responsinator.com/?url=localhost%2FAssignment%2520App%2Fbasic.html%23
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet"/>
<div class="row">
<div class="col-xl-12">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
<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="login.php">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="register.php">Register</a>
</li>
</ul>
</nav>
</div>
</div>
I think the easiest way is to delete sm from navbar-expand-sm. So it will only be navbar-expand
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet"/>
<div class="row">
<div class="col-xl-12">
<nav class="navbar navbar-expand bg-dark navbar-dark fixed-top">
<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="login.php">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="register.php">Register</a>
</li>
</ul>
</nav>
</div>
</div>
If you make my fiddle smaller you can see it. navbar-expand-sm means that it will become collapse when it's on a small screen. You can change sm to -md, -lg or -xl. this stands for screen size reference: https://getbootstrap.com/docs/4.0/components/navbar/
The reason it's wrapping to vertical is because there is a breakpoint at 576 pixel width that changes the flex-direction property so that it's set to row when the viewport width is greater than 576 pixels and column when it is less.
If you need to fix this with just CSS then you can do this with a simple override.
.navbar-expand-sm .navbar-nav{
flex-direction:row;
}
.navbar-expand-sm .navbar-nav .nav-link{
padding-right:0.5rem;
padding-left:0.5rem;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet"/>
<div class="row">
<div class="col-xl-12">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
<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="login.php">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="register.php">Register</a>
</li>
</ul>
</nav>
</div>
</div>
However the best way is probably to simply remove the sm from navbar-expand-sm (as pointed out by xmaster) which will mean this rule doesn't apply.
Overide the flex-direction
.navbar-nav {
display: -ms-flexbox;
display: flex;
/* delete this
-ms-flex-direction: column;
flex-direction: column;
*/
padding-left: 0;
margin-bottom: 0;
list-style: none;
}
.navbar-nav {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: row !important;
flex-direction: row !important;
padding-left: 0;
margin-bottom: 0;
list-style: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet" />
<div class="row">
<div class="col-xl-12">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
<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="login.php">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="register.php">Register</a>
</li>
</ul>
</nav>
</div>
</div>
I am working on a website, what I want to achieve is that the navbar of my page stacked over the slider.
I have tried z-index property.
My HTML Code:
<nav class="navbar navbar-expand-md bg-danger navbar-dark sticky-top container custom-navi" style="z-index: 2">
<!-- Brand -->
<a class="navbar-brand" href="#">St. Clare's Sr. Sec School</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">Home</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>
<li class="nav-item">
<a class="nav-link" href="#">Messages</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">More</a>
</li>
</ul>
</div></nav>
What I want to achieve is shown in the below image :
What I have right now is :
Bootstrap 4 has class the fixed-top for this purpose.
<nav class="navbar navbar-expand-md bg-danger navbar-dark fixed-top custom-navi">
<!-- Brand -->
<a class="navbar-brand" href="#">St. Clare's Sr. Sec School</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">Home</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>
<li class="nav-item">
<a class="nav-link" href="#">Messages</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">More</a>
</li>
</ul>
</div></nav>
The fixed-top answer by ZimSystem is a good one, but in the event that you don't want the position to be fixed, you could set the navbar to be absolute. Bootstrap 4 has the class position-absolute for that (though it would take more work to center the navbar horizontally).
if you wana put your slider behind your navbar try the below css code for your slider and navbar
.slider{
position:absolute;
top:0;
z-index:0;
}
.navbar-nav{
z-index:1;
}