Team,
I am working on responsive where I am getting menu in small size in the mobile mode but not as full width with close button.
Here is my image for the reference.
Here is the jsfiddle
Here is my code
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container">
<a class="navbar-brand" href="#"><img src="images/GEPL-Capital-Logo.webp"></a>
<button class="navbar-toggler" style="margin-right:5px !important;" 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 top_nav" id="navbarSupportedContent">
<ul class="navbar-nav mx-auto ">
<li class="nav-item">
Home
<hr class="hr_nav">
</li>
<li class="nav-item ">About Us
</li>
<li class="nav-item ">Support
</li>
<li class="nav-item ">Contact Us
</li>
</ul>
<ul class="navbar navbar-nav navbar-right" style="display:flex;">
<li>
<button class="btn top_login">
Login
</button>
</li>
<li>
<button class="btn sign_btn">
SignUp
</button>
</li>
</ul>
</div>
</div>
</nav>
Please let me know what I am doing wrong. I am using bootstrap 5.0.2
I removed
.top_nav {margin-left: 204px!important;}
and added
.top_nav {
position: fixed;
top: 0;
width: 100%;
background: #fff;
left: 0;
padding-top: 70px;
z-index: -1;
}
Here is the updated link jsfiddle
UPDATE jsfiddle
link
Related
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 am working on horizontal navbar with collapsible menu. I am using bootstrap 4 and angular. Collapsing/showing is working fine on menu icon click, but I want to bind some CSS transitions (changing height slowly). My simple code is here:
<nav class="navbar navbar-expand-md navbar-light bg-light">
<a class="navbar-brand" href="#">SOME BRAND</a>
<button id="toggler" class="navbar-toggler collapsed" type="button" data-toggle="collapse" (click)="toogle();" data-target="#menu" aria-controls="menu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse" id="menu" [ngClass]="activeClass ? 'show' : 'collapse'" data-parent="#toggler">
<ul class="navbar-nav ml-auto">
<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>
</ul>
</div>
</nav>
My CSS is:
.on-slide-down {
height: 500px;
}
#menu {
transition: height 1.5s ease;
height: auto;
overflow: hidden;
}
And JS function is:
toogle(){
this.activeClass = !this.activeClass;
let menu:HTMLElement = document.querySelector("#menu");
menu.classList.toggle("on-slide-down");
}
So my idea is to dynamically bind the class .on-slide-down which increase height. Unfortunately, the transitions is not working. Collapsing and showing the menu has still it's default behaviour. I was doing it according this example, but I dont know where is the problem.
Why not just override the normal Bootstrap collapse transition? This way you don't need the extra JS:
https://www.codeply.com/go/WJmJoNIlbA
<nav class="navbar navbar-expand-md navbar-light bg-light">
<a class="navbar-brand" href="#">SOME BRAND</a>
<button id="toggler" class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#menu" aria-controls="menu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="menu" data-parent="#toggler">
<ul class="navbar-nav ml-auto">
<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>
</ul>
</div>
</nav>
CSS:
#menu {
transition: height 1.5s ease;
}
I am looking for a way to have a bigger navbar-brand (bootstrap 4) than the height of the navbar itself. So the navbar-brand should overlap the navbar. Currently it seems that the navbar height is increased to fit the navbar-brand.
My HTML looks like:
<nav class="navbar navbar-expand-lg navbar-custom fixed-top top-menu-4">
<div class="container">
<div class="navbar-brand">
<img src="https://via.placeholder.com/350x170.png" width="350px" height="170px" alt="">
</div>
<button class="navbar-toggler custom-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"
aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="none.html">Example 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="none.html">Example 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="none.html">Example 3</a>
</li>
</ul>
</div>
</div>
</nav>
So what I want is something like an overlap:
Give a fixed height to the .navbar and apply transform for .navbar-brand
.navbar {
height: 100px;
background-color: rgba(255, 255,255, 0.9);
}
.navbar-brand {
transform: translateY(calc(50% - 30px));
}
Find the fiddle here
You can set the height of the .navbar to some fixed value and since you're using flexbox on your .container you can align the .nav-brand element to the top of it.
See below for details:
.navbar .container {
height: 100px; /* change this to whatever value you want */
}
.navbar-brand {
align-self: flex-start;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg navbar-custom fixed-top top-menu-4">
<div class="container">
<div class="navbar-brand">
<img src="https://via.placeholder.com/350x170.png" width="350px" height="170px" alt="">
</div>
<button class="navbar-toggler custom-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"
aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="none.html">Example 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="none.html">Example 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="none.html">Example 3</a>
</li>
</ul>
</div>
</div>
</nav>
You should apply absolute position on your image.
.navbar-brand img {
position: absolute;
top: 10px;
left: 30px;
max-height: 100px;
object-fit: contain;
}
You can simply make the navbar-brand position:absolute...
.navbar-brand {
top:0;
position: absolute;
}
Demo: https://www.codeply.com/go/sJc3uCUL5s
My portfolio page has a sticky navbar, but when I click on the navbar links it overlaps the text in each section. In about, it overlaps the text. In "portfolio" and "about" it overlaps both tiles. I tried to compensate with some padding-top in each section to no avail.
Here is the complete navbar:
<nav class="navbar navbar-toggleable-md navbar-light bg-faded fixed-top" style="background-color: #fc7a57;">
<button class="navbar-toggler navbar-toggler-right" 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>
<a class="navbar-brand mr-auto navfont" href="#">portfolio.</a>
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#about"><i class="fa fa-user-circle-o" aria-hidden="true"></i> about</a>
</li>
<li class="nav-item">
<a class="nav-link text" href="#portfolio"><i class="fa fa-picture-o" aria-hidden="true"></i> portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link text" href="#contact"><i class="fa fa-envelope-o" aria-hidden="true"></i> contact</a>
</li>
</ul>
</nav>
And here's the CSS code for one of the sections
#contact {
background-color: #466365;
width: 100%;
height: 100%;
padding-top:50px;
color: white;
}
https://codepen.io/pablovester/pen/ZKJxLL
Thank you guys
First thing wrong I see is you are using ID's to style elements, NO, use class.
You are using ID "portfolio" in more than 1 element while Id should be unique in document.
Anyway to fix your problem just add margin-top: 100px; will be enough
.portfolio {
background-color: #bcd39c;
width: 100%;
height: 100%;
padding-top:50px;
margin-top:100px;
}
and add a class in html
<div id="portfolio" class="portfolio">
and also in other needed IDS.
Hope it helps!
I'm working on this site and did exactly what you are trying to achieve, check it out
Take a look at this HTML source and check if help you. Don't forget to copy all links at CSS and Javascript Settings section.
https://codepen.io/danogliari/pen/gWQWqo
<nav id="myNavbar" class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse">
<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="#">Daniel Ogliari</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-right" id="navbarCollapse">
<ul class="nav navbar-nav">
<li class="active">About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
My solution to this same problem in Bootstrap 4 is...
.navbar-nav > .nav-item > a {
position: relative;
}
I'm having a play around with Bootstrap 4, more specifically the navbar menu. Is there is a way I can make the little navbar toggle button align to the right of the page rather than have it floating to the left next to the logo?
This is my current code.
#media (min-width: 992px) {
.navbar-nav li a { line-height: 85px; }
}
#media (max-width: 991px) {
.navbar-brand { float: none; }
}
.navbar-toggler{
border:none;
width:1em;
}
<nav class="navbar navbar-light bg-faded navbar-full">
<a class="navbar-brand" href="#"><img class="img-fluid" src="img/logoMedium.png" /></a>
<button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
<div class="collapse navbar-toggleable-md" id="navbarResponsive">
<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 Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Solar Power</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">No Obligation Quote</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
</div>
</nav>
Thanks for the help :)
just add the class ml-auto to your toggle button
in that way you make margin-left:auto
<button type="button" class="navbar-toggler ml-auto hidden-sm-up float-xs-right" data-toggle="collapse" data-target="#navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
Use .float-xs-right class:
<button class="navbar-toggler hidden-lg-up float-xs-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
Or add float: right; to .navbar-toggler as the below snippet:
Note that pull-right has been removed in v4.
#media (min-width: 992px) {
.navbar-nav li a {
line-height: 85px;
}
}
#media (max-width: 991px) {
.navbar-brand {
float: none;
}
}
.navbar-toggler {
border: none;
width: 1em;
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<nav class="navbar navbar-light bg-faded navbar-full">
<a class="navbar-brand" href="#">
<img class="img-fluid" src="img/logoMedium.png" />
</a>
<button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
<div class="collapse navbar-toggleable-md" id="navbarResponsive">
<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 Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Solar Power</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">No Obligation Quote</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
</div>
</nav>
Put the class pull-right and you'll get the result that you're looking for.
<button class="navbar-toggler hidden-lg-up pull-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
or you can define a style with the following parameters:
float: right !important;
try this piece of code:
.navbar-toggler {
margin-left: 90% !important;
}
This is how I solved this:
<header>
<nav class="navbar navbar-fixed-top navbar-dark bg-inverse">
<a class="navbar-brand" href="#">Fixed top</a>
<button type="button" class="navbar-toggler hidden-sm-up float-xs-right" data-toggle="collapse" data-target="#navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
<div class="clearfix"></div>
<div class="collapse navbar-toggleable-xs" id="navbarResponsive">
<ul class="nav navbar-nav">
<li class="nav-item active">
Home<span class="sr-only">(current)</span>
</li>
<li class="nav-item">
Planets
</li>
<li class="nav-item">
Spaceships
</li>
<li class="nav-item">
About
</li>
<li class="nav-item">
Contact
</li>
</ul>
</div>
</nav>
</header>
Note that you have to use the clearfix, because otherwise the float from the button would do funky things to the menu while it's collapsing.
This is what works for me in Bootstrap 4
<button type="button" class="navbar-toggler navbar-toggler-right"
data-toggle="collapse" data-target=".navbar-collapse"
aria-controls="navbar-collapse" aria-expanded="false" aria-label="Toggle navigation">
or even simpler from Bootstrap docs
<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>
.navbar-light .navbar-nav .nav-link {
color: rgb(255, 255, 255) !important;
}
.navbar {
display: block !important;
min-height: 54px;
}
.pull-right{
float:right !important;
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light" style="background-color: #de7a22 !important;">
<button class="navbar-toggler pull-right" type="button" data-toggle="collapse" data-target="#myNavbar" aria-controls="myNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#"><i class="fa fa-home"></i><span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" 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="#">Gallery</a></li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a></li>
<li class="nav-item">
<a class="nav-link" href="#">Sponsorship</a></li>
<li class="nav-item">
<a class="nav-link" href="#">Contact us</a></li>
</ul>
</div>
</nav>
</body>
You have to align it just like another button tag, first wrap it inside a container to be able to move it later, after that create a div with .text-right class and then put your toggle button inside. See the example below.
<div class='container'>
<div class='text-right'>
<button> Button1 </button>
</div>
</div>
or
<div class='container text-right'>
<button> Button1 </button>
</div>enter code here
Both solutions work perfectly in Bootstrap 4.5
Just use navbar-expand-lg and your problem will going to solve.
It should look like this:
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
I couldn't get any of the above solutions to work. So this simple hack does the job:
HTML:
<nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top">
<div class="container-fluid">
<div class="row d-inline">
<div class="col">
<a class="navbar-brand" href="{% url 'home' %}">
<img src="{% static 'img/logo.png' %}" alt="Logo" height="100" class="d-inline-block">
<span class="fs-2">Abstract Spacecraft</span>
</a>
</div>
<div class="col">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" id="as-navbar-toggler">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
CSS:
#as-navbar-toggler {
position: absolute;
right: 5px;
top: 5px;
height: 35px;
padding: 0px;
}
Result (in Chrome's iPhone5 screen emulator):
What's nice about this is because there's 0 padding, it rides nicely over the default (centered) page title.
In bootstrap 5 you can just do this :
add the class 'ms-auto' and your toggler will shift from left to right
<button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>