In the extra-small size screen, I want to have the navbar-brand and navbar-nav vertically stacked.
<nav class="navbar navbar-dark navbar-expand-sm bg-primary fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Ristorante Con Fusion</a>
<ul class="navbar-nav mr-auto">
<li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="./aboutus.html">About</a></li>
<li class="nav-item"><a class="nav-link" href="#">Menu</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
</div>
</nav>
But for some reason, it looks like this
How can I have the navbar-nav under the navbar-brand in an extra-small size screen?
Do you want the nav items to stack vertically too? I think you're looking for this...
<nav class="navbar navbar-dark navbar-expand bg-primary fixed-top">
<div class="container flex-column flex-sm-row">
<a class="navbar-brand" href="#">Ristorante Con Fusion</a>
<ul class="navbar-nav mr-sm-auto mr-0">
<li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="./aboutus.html">About</a></li>
<li class="nav-item"><a class="nav-link" href="#">Menu</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
</div>
</nav>
https://codeply.com/p/UNjoLoEnSn
Use .collapse class and button toggler.
UPDATE
Just add flex-column flex-lg-row classes in your nav tag.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<nav class="navbar navbar-expand-lg navbar-light bg-light flex-column flex-lg-row">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="navbar-nav mr-auto">
<li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="./aboutus.html">About</a></li>
<li class="nav-item"><a class="nav-link" href="#">Menu</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
</nav>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
Related
I have a navbar.php include file which i would like to make dynamic depending which url i am on. I am working on a php file with the latest version of bootstrap
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="topheader">
<div class="container">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<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="/about-us">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/our-work">Our Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
I have followed the instruction on the navbar,but when the toggle button is clicked it doesn't show the pages.What could be the issue?I am working on windows 10.
Here below is the HTML code.
<nav class="navbar navbar-dark navbar-expand-sm fixed-top ">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Navbar">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand mr-auto" href="#">Ristorante con Fusion</a>
<div class="collapse navbar-collapse" id="Navbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="./aboutus.html">About</a></li>
<li class="nav-item"><a class="nav-link" href="#">Menu</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
You need remove the .navbar-toggler from the button since by default its using display:none;
Then you also need to remove .navbar-collapse from the #Navbar since its forcing the item to be visible with display: flex !important.
<nav class="navbar navbar-dark navbar-expand-sm fixed-top ">
<div class="container">
<button type="button" data-toggle="collapse" data-target="#Navbar">
<span class="navbar-toggler-icon"></span>
Text
</button>
<a class="navbar-brand mr-auto" href="#">Ristorante con Fusion</a>
<div class="collapse" id="Navbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="./aboutus.html">About</a></li>
<li class="nav-item"><a class="nav-link" href="#">Menu</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
Double check if you added the jQuery library and Bootstrap Js. if not, you can refer to the links below.
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
Try this one in <button> tag
onclick="document.location='link.html'"
(link.html) should be any page that you want to open
You need to link the site you want to visit to the href.
Simply replace the # with the link of your site.
You also dont need the ./ in front of your html document if it is in the same Folder as the index.html
<nav class="navbar navbar-dark navbar-expand-sm fixed-top ">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Navbar">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand mr-auto" href="ristorante.html">Ristorante con Fusion</a>
<div class="collapse navbar-collapse" id="Navbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item active"><a class="nav-link" href="index.html">Home</a></li>
<li class="nav-item"><a class="nav-link" href="aboutus.html">About</a></li>
<li class="nav-item"><a class="nav-link" href="menu.html">Menu</a></li>
<li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li>
</ul>
</div>
</div>
</nav>
I am very new to learning Bootstrap, my navbar is not collapsing, furthermore, I want my three list items Home, Features and Pricing to be on left whereas sign up and login on the right.
I was successfully able to scale my image using CSS (id = brandimg). Please fix this issue.
My markup is:
<nav class="navbar navbar-default navbar-light navbar-expand" style="background-color: #3ab3f0">
<div class="container collapse navbar-collapse">
<div class="navbar-header">
<span class="navbar-brand">
<img src="https://images8.alphacoders.com/416/416969.jpg" id="brandimg">
AnmGal
</span>
</div>
<div class="navbar">
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" 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>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="nav-item"><a class="nav-link" href="#">Sign Up</a></li>
<li class="nav-item"><a class="nav-link" href="#">Login</a></li>
</ul>
</div>
</div>
</nav>
This should work for you:
<nav class="navbar navbar-expand-lg navbar-light bg-primary">
<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="#">Home <span class="sr-only">(current)</span></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>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Signup</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Login</a>
</li>
</ul>
</div>
</nav>
However, I would recommend you to read this https://getbootstrap.com/docs/4.3/components/navbar/ you will learn all you need about bootstrap navbars.
If you are use bootstrap 4 then try this:
<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light justify-content-md-center justify-content-start">
<a class="navbar-brand" href="#"><img src="https://images8.alphacoders.com/416/416969.jpg" id="brandimg">
AnmGal</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-between align-items-center w-100" id="navbarNavDropdown">
<ul class="navbar-nav mr-0">
<li class="nav-item">
<a class="nav-link" 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>
</ul>
<div class="right-menu">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="#">Sign Up</a></li>
<li class="nav-item"><a class="nav-link" href="#">Login</a></li>
</ul>
</div>
</div>
</nav>
how to create a hamburger menu for this code?
<div class="container-fluid h-100">
<div class="row h-100">
<div class="collapse d-md-flex h-100 box">
<ul class="nav flex-column flex-nowrap h-100">
<li class="nav-item h-25"><a class="nav-link h-100 " href="#">A </a></li>
<li class="nav-item h-25 "><a class="nav-link h-100 " href="#">B</a></li>
<li class="nav-item h-25"><a class="nav-link h-100 " href="#l">C</a></li>
<li class="nav-item h-25"><a class="nav-link h-100" href="#">D</a></li>
</ul>
</div>
</div>
</div>
can anyone help please?
Basically, you should follow the documentation. Your code should look like this.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">A</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">B</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">C</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">D</a>
</li>
</ul>
</nav>
I am using this code inside CodeIgniter 3.1.6 + Bootstrap 4.0 - beta 2 and the navbar when it collapses is no longer navigable; clicking the button does not happen anything. The same code tried on bootply instead works correctly, can someone explain me why?
<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="container">
{url type="anchor" url="" text=$header.site_title|escape:"html":"UTF-8" attr="class='navbar-brand'"}
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav ml-auto">
{if $current_user.user_role eq 'Admin'}
<li class="nav-item">
<a class="nav-link" href="/index.php">Home</a></li>
<li class="nav-item"><a class="nav-link" href="/index.php/items">Items</a></li>
<li class="nav-item"><a class="nav-link" href="/index.php/admin">Admin</a></li>
<li class="nav-item"><a class="nav-link" href="/index.php/inbox">Inbox{if $count_unread_messages gt 0} {$count_unread_messages}{/if}</a></li>
<li class="nav-item"><a class="nav-link" href="/index.php/account">Account</a></li>
<li class="nav-item"><a class="nav-link" href="/index.php/logout">Logout</a></li>
{elseif $current_user.user_role eq 'Buyer'}
<li class="nav-item"><a class="nav-link" href="/index.php">Home</a></li>
<li class="nav-item"><a class="nav-link" href="/index.php/items">Items</a></li>
<li class="nav-item"><a class="nav-link" href="/index.php/inbox">Inbox{if $count_unread_messages gt 0} {$count_unread_messages}{/if}</a></li>
<li class="nav-item"><a class="nav-link" href="/index.php/account">Account</a></li>
<li class="nav-item"><a class="nav-link" href="/index.php/logout">Logout</a></li>
{elseif $current_user.user_role == 'Vendor'}
<li class="nav-item"><a class="nav-link" href="/index.php">Home</a></li>
<li class="nav-item"><a class="nav-link" href="/index.php/items">Items</a></li>
<li class="nav-item"><a class="nav-link" href="/index.php/inbox">Inbox{if $count_unread_messages gt 0} {$count_unread_messages}{/if}</a></li>
<li class="nav-item"><a class="nav-link" href="/index.php/account">Account</a></li>
<li class="nav-item"><a class="nav-link" href="/index.php/logout">Logout</a></li>
{elseif $current_user.user_role == 'half'}
{if $allow_guests eq TRUE}
<li class="nav-item"><a class="nav-link" href="/index.php">Home</a></li>
<li class="nav-item"><a class="nav-link" href="/index.php/items">Items</a></li>
{/if}
<li class="nav-item"><a class="nav-link">Logout</a></li>
{else}
{if $allow_guests eq TRUE}
<li class="nav-item"><a class="nav-link" href="/index.php">Home</a></li>
<li class="nav-item"><a class="nav-link" href="/index.php/items">Items</a></li>
{/if}
<li class="nav-item"><a class="nav-link" href="/index.php/login">Login</a></li>
<li class="nav-item"><a class="nav-link" href="/index.php/register">Register</a></li>
{/if}
</ul>
</div>
</div>
Here is the link to the bootply: https://www.bootply.com/cl3LVVqW5y
Executing the code and scaling/zooming the window the menu remains clickable
HTML Generated
<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="container">
<a href="/index.php" class='navbar-brand'>Brand</a>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="/index.php">Home</a></li>
<li class="nav-item"><a class="nav-link" href="/index.php/items">Items</a></li>
<li class="nav-item"><a class="nav-link" href="/index.php/login">Login</a></li>
<li class="nav-item"><a class="nav-link" href="/index.php/register">Register</a></li>
</ul>
</div>
</div>
First you should know that CodeIgniter cannot change the way your HTML behaves after it's generated. A modern browser should display the generated HTML just fine.
I used the Bootstrap 4 starter template: https://getbootstrap.com/docs/4.0/getting-started/introduction/#starter-template
The code you posted (and the generated HTML) is missing a closing nav tag. Even without the closing nav tag, your code works when inserted into the starter template. This may mean that the source of the error is in your template, or code that you're not showing us.
Since you are using .navbar-expand-sm , the navbar switches to small device mode at 576px. I am not experiencing any problems when I view the following code in my browser:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Stack Overflow Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="container">
<a href="/index.php" class='navbar-brand'>Brand</a>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="/index.php">Home</a></li>
<li class="nav-item"><a class="nav-link" href="/index.php/items">Items</a></li>
<li class="nav-item"><a class="nav-link" href="/index.php/login">Login</a></li>
<li class="nav-item"><a class="nav-link" href="/index.php/register">Register</a></li>
</ul>
</div>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</body>
</html>
If you run this in your browser, and if you are still having problems, perhaps your browser doesn't support the newer features of bootstrap 4. I know this isn't really a good answer, but was trying to help you figure your problem out.
Fixed, missing popper.js in header!