I wrote a code of a toggle button to be seen when the screen size of the
browser is reduced on the navbar using bootstrap4 but the button is not
showing please what is wrong with my code:
<nav class="navbar navbar-expand-lg">
<button class="navbar-toggler " data-toggle="collapse" data-
target="#navbarcollapse">
<span class="navbar-toggler-icon" ></span>
</button>
<div class="collapse navbar-collapse" id="navbarcollapse">
<ul class ="navbar-nav mr-auto">
<li class="nav-item active">Home</li>
<li>Services</li>
<li>Downloads</li>
<li>Projects</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</div>
</nav>
Just added bg-light navbar-light and the button was visible.
<nav class="navbar navbar-expand-lg bg-light navbar-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarcollapse">
<span class="navbar-toggler-icon" ></span>
</button>
<div class="collapse navbar-collapse" id="navbarcollapse">
<ul class ="navbar-nav">
<li class="nav-item">Home</li>
<li class="nav-item">Services</li>
<li class="nav-item">Downloads</li>
<li class="nav-item">Projects</li>
<li class="nav-item">About Us</li>
<li class="nav-item">Contact</li>
</ul>
</div>
</nav>
Related
I'm making a website for a school club for my first starter front-end project and I've been using the bootstrap library for CSS. I've ran into a bit of a problem though, my navbar isn't centred horizontally and more so leans to the left. I wanted the title and icon all to the left then the list items on the other side of the container so I played around with margins but it never really worked out. Thank you for helping.
<nav class="navbar navbar-expand-lg ">
<div class="container">
<a class="navbar-title" href="home.html">Title</span>
<img class="navbar-brand" src="https://i.imgur.com/qRujsE0.jpg"></img>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-btarget="#navmenu">
<span class="navbar-toggle-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navmenu">
<ul class="navbar-nav mx-auto">
<li class="nav-item">Home</li>
<li class="nav-item">About Us</li>
<li class="nav-item"><a href="contact.html" class="nav-link">Contact Us</a</li>
<li class="nav-item">Join Us</li>
</ul>
</div>
</div>
</nav>
First, I suggest to specify a width and a height to your image. Then, you have to use the class ".ms-auto" to get the navigation aligned on the right as per Boostrap documentation. You could have also used Bootstrap flexbox with the class ".justify-content-between".
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg ">
<div class="container">
<a class="navbar-brand" href="#">
<img src="https://i.imgur.com/qRujsE0.jpg" width="30" height="30" class="d-inline-block align-top" alt="" />
Title
</a>
<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" id="navmenu">
<ul class="navbar-nav ms-auto">
<li class="nav-item">Home</li>
<li class="nav-item">About Us</li>
<li class="nav-item"><a href="contact.html" class="nav-link">Contact Us</a</li>
<li class="nav-item">Join Us</li>
</ul>
</div>
</div>
</nav>
I have my links on the right with no navbar on the left.
When the screen gets smaller I want the hamburger to replace these links without moving to the left side.
I added as sort of a logo placeholder which pushed the hamburger menu to the right, but the menu is still opening to the left.
Here's the code:
<nav class="navbar navbar-expand-lg navbar-light bg-light" style="margin-bottom: 20px;">
<button class="navbar-toggler left:auto" data-toggle="collapse" data-target="#navbarMenu">
<span class="navbar-toggler-icon ml-auto"></span>
</button>
<div class="collapse navbar-collapse ml-auto" id="navbarMenu">
<ul class="navbar-nav ml-auto">
<li class="nav-item">Home</li>
<li class="nav-item">FAQ</li>
<li class="nav-item">Contact Us</li>
</ul>
</div>
</nav>
i think this is what are you asking for
or
i'm not understanding your question
<nav class="navbar navbar-expand-lg navbar-light bg-light" style="margin-bottom: 20px;">
<button class="navbar-toggler left:auto" data-toggle="collapse" data-target="#navbarMenu">
<span class="navbar-toggler-icon ml-auto"></span>
</button>
<div class="collapse navbar-collapse ml-auto" id="navbarMenu">
<ul class="navbar-nav ml-auto">
<li class="nav-item ml-auto">Home</li>
<li class="nav-item ml-auto">FAQ</li>
<li class="nav-item ml-auto">Contact Us</li>
</ul>
</div>
</nav>
I've tried to make a navbar which looks like this:
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
CIDashboard
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarMenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarMenu">
<ul class="navbar-nav">
<li class="nav-item">
LOG OUT
</li>
<li class="nav-item">
USER
</li>
</ul>
</div>
</nav>
My problem is that I have a space in the right side of the navbar.
How can I resolve this problem?
I'm trying out a simple bootstrap navbar. However, my data-toggle isn't working.
Here's the HTML:
<body>
<nav class="navbar navbar-default navbar-inverse navbar-fixed-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-target=".navbar-collapse" data-toggle="collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Meet the Team</li>
<li>Get Involved</li>
<li>Contact Us</li>
</ul>
</div>
</nav>
</body>
<nav class="navbar navbar-toggleable-md navbar-inverse navbar-fixed-top">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-controls="navbar-collapse"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li>Meet the Team</li>
<li>Meet the Team</li>
<li>Get Involved</li>
<li>Contact Us</li>
</ul>
</div>
</nav>
The problem was the data-target=".navbar-collapse".
Dots only belong to classes. You have to use # and an id for the collapsible part <div class="collapse navbar-collapse" id="navbar-collapse">
The bootstrap doc is pretty good. You will find it here
I am attempting to use Bootstrap to build a navbar for my website. I am have tried to use the toggling feature that allows the menu to be more accessible on mobile devices. When I zoom in to 200% on my browser, it toggles fine and works great. When I connect to my site on my phone however, it fails to automatically toggle.
Here is my code:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<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="index.php"><i class="fa fa-server"></i> Server List</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li>Servers</li>
<li class="dropdown">
Purchase<b class="caret"></b>
<ul class="dropdown-menu">
<li>Highlighted Spot</li>
<li>Advertising</li>
</ul>
</li>
<li>Support</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
My Account<b class="caret"></b>
<ul class="dropdown-menu">
<li>My Servers</li>
<li>Favorites</li>
<li>My Profile</li>
<li>Settings</li>
</ul>
</li>
<li>Logout</li>
</ul>
</div>
</div>
</nav>
I've tried everything I've found online to no avail, so I greatly thank anyone who helps me out with this!