I have a code when i load an image first of all my navbar expands and take too much space on, how i can avoid such?
Secondly when i load an image as mentioned above my links to sections does not work properly as it does not take me to the top of section but bit lower because of size of navbar.
Any suggestions or help please?
<nav class="navbar navbar-expand-md navbar-light bg-dark fixed-top">
<div class="container">
<a href="#" class="navbar-brand">
<img src="/images/osamatraders.svg" width="60" alt="">
</a>
<button type="button" class="navbar-toggler bg-light " data-toggle="collapse" data-target="#nav"><span
class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse justify-content-center" id="nav">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link text-light text-uppercase font-weight-bold px-3" href="#aboutus">About
Us</a></li>
Related
I have a navbar with a centered logo, but I can't figure out how to get rid of the margin on either side of the logo, I think it's because flex evens out the three sections of the nav?
This is what I have:
Navbar with required sizes
Is it possible to set a % size in CSS or similar to Bootstrap's col size so that I can have something like this;
col-5 | col-2 | col-5
links | logo | links
I've tried setting the container section for the image to a specific size or percentage but that makes the image smaller.
I have made a codepen here.
<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark navbar-no-bg" role="navigation">
<div class="collapse navbar-collapse w-100" id="top-navbar-1">
<ul class="navbar-nav mx-auto">
<li class="nav-item mr-3">
<a class="nav-link" href="<?php echo URLROOT; ?>/tours">Virtual 360° Tours</a>
</li>
<li class="nav-item mr-3">
<a class="nav-link" href="<?php echo URLROOT; ?>/photos">Photography</a>
</li>
<li class="nav-item mr-3">
<a class="nav-link" href="<?php echo URLROOT; ?>/photos">Photography</a>
</li>
</ul>
</div>
<section id="nav-logo-image" class="nav-logo center ">
<a class="navbar-brand" href="<?php echo URLROOT; ?>">
<img src="https://via.placeholder.com/300x55" class="img-fluid" alt="">
</a>
</section>
<div class="collapse navbar-collapse w-100" id="top-navbar-1">
<ul class="navbar-nav mx-auto">
<li class="nav-item mr-3">
<a class="nav-link" href="<?php echo URLROOT; ?>/drones">Drone Photography</a>
</li>
<li class="nav-item mr-3">
<a class="nav-link" href="<?php echo URLROOT; ?>/design">Web Design</a>
</li>
<li class="nav-item mr-3">
<a class="nav-link" href="<?php echo URLROOT; ?>/design">Web Design</a>
</li>
</ul>
</div>
<button class="navbar-toggler navbar-toggler-sm mr-4" type="button" data-toggle="collapse" data-target="#top-navbar-1" aria-controls="top-navbar-1" aria-expanded="true" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
Remove the .center class and logo image sizing. You probably want to restructure the Navbar to get the correct order and alignment on mobile too.
Simplified it to: https://codeply.com/p/XtQAeldyEX
<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark navbar-no-bg" role="navigation">
<button class="navbar-toggler navbar-toggler-sm mr-4" type="button" data-toggle="collapse" data-target="#top-navbar-1" aria-controls="top-navbar-1" aria-expanded="true" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse w-100" id="top-navbar-1">
<ul class="navbar-nav ml-lg-auto ml-3">
..
</ul>
</div>
<section id="nav-logo-image" class="order-first order-lg-0 nav-logo">
<a class="navbar-brand mx-3" href="<?php echo URLROOT; ?>">
<img src="https://via.placeholder.com/300x55" class="img-flud" alt="">
</a>
</section>
<div class="collapse navbar-collapse w-100" id="top-navbar-1">
<ul class="navbar-nav mr-lg-auto ml-lg-0 ml-3">
..
</ul>
</div>
</nav>
That is not a margin gap. You set the logo to align centre to the section div. This is because of the logo image. The image has max-width: 100% so it tries to accommodate in given width without changing the aspect ratio (dimensions) of the image.
Try with a bigger width image and set the width: 100% to the anchor tag.
You are setting width:100% on a flex item that is probably dividing the whole div into three equal parts remove w-100 from the html and remove width:100% from class .center, this should remove the unwanted margins
I am new to Bootstrap and web development but I am trying to reorganize the default navbar that is generated with the execution of a blank asp.net core 2.2 web application. When this web app is generated there are nav-items that are floated to the left, but in this navbar I want to add another nav-item for log in and place it all the way to the right of the page similar to how many websites place their login links.
I have tried playing around with margins and padding in the container as well as in the navbar. When I would change the margins for the left and right side of the container it would just shift the entire navbar in one direction either left or right. I have also opened up and looked at the bootstrap.css in order to see how it works and trying to see if I could find useful information. I have also tried playing around with the different nav-bar classes.
//I tried playing around with margins in my css as such
.container{
padding-left: 0px;
padding-right: 0px;
}
//part of my layout page
<header>
`<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light
bg-white border-bottom box-shadow mb-3">
<div class="container">
<a class="navbar-brand" asp-area="" asp-
page="/Index">RazorPagesDemo</a>
<button class="navbar-toggler" type="button" data-
toggle="collapse" data-target=".navbar-collapse" aria-
controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex flex-
sm-row ">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-
page="/Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-
page="/Privacy">Privacy</a>
</li>
</ul>
<ul class="navbar-nav flex">
<li>
<a class="nav-link text-dark" asp-area="" asp-
page="/Login">Login</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
Here I would like to make it so that my login nav-item reaches all the way to the right corner.
You could set style as position:absolute;right:0 to place it at the right of page:
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
<a class="navbar-brand" asp-area="" asp-page="/Index">RazorPagesDemo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row ">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-
page="/Index">Home1</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-
page="/Privacy">Privacy1</a>
</li>
</ul>
<ul class="navbar-nav flex" style="position:absolute;right:0">
<li>
<a class="nav-link text-dark" asp-area="" asp-page="/Login">Login</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
As long as your navigation is inside .container it will be max-width: 1140px wide and centered because of margin-left: auto and margin-right: auto.
Try to use .container-fluid or remove container div so it will be full width "from left to right".
I am using bootstrap 4 to make an application, in which i have two navbars and both needs to be fixed at top in which the second navbar needs to hide while scrolling.
Html:
Navbar 1:
<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-custom-light">
<div class="container-fluid">
<div class="row w-100">
<div class="col-md-2 col-lg-2 col-sm-4 col-xs-4">
<a class="navbar-brand" href="#">
New Project
</a>
</div>
<div class="col-md-4 col-lg-4 col-sm-6 col-xs-6 d-none d-sm-none d-md-block mt-2">
<h4 class="font-weight-600">
Little description
</h4>
</div>
<div class="col-3"></div>
<div class="col-3 mt-3 d-none d-sm-none d-md-block">
<ul class="navbar-nav pl-5">
<li class="nav-item mr-3">
<a class="nav-link" href="#">
Notification
</a>
</li>
<li class="nav-item font-weight-600 mr-3">
<a class="nav-link text-capitalize" href="#">
Hello Admin
</a>
</li>
<li class="nav-item font-weight-600 mr-3">
<a class="nav-link text-capitalize mr-3" href="#">
Profile
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
search
</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
Navbar 2:
<nav class="navbar fixed-top navbar-expand-md bg-dark navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">Navbar</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" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
Here both the navbar needs to be fixed top for which i have used fixed-top class..
But as of now the navbars are overlapping each other.
You could see in the link https://www.bootply.com/y8EfMpCMc4# where the overlapping happens.
Kindly help me to place a navbar 2 below navbar 1 with position fixed (which also needs to be responsive), in which the navbar 2 alone needs to be in collapsed for small devices and needs to be on right side of navbar 1's navbrand ie.right to New Project.
Use sticky-top on the 1st instead of fixed-top, and make the 2nd navbar static by removing fixed-top.
<nav class="navbar sticky-top navbar-expand-lg navbar-light bg-custom-light"></nav>
<nav class="navbar navbar-expand-md bg-dark navbar-dark"></nav>
Demo: https://www.codeply.com/go/vbF0Sch9xc
Related:
Bootstrap 4 collapsing two navbars into one toggle button
Bootstrap 4 Multiple fixed-top navbars
I basically have a pretty simple question, but my portfolio will look better if I can make this simple addition.
I want my NavBar in bootstrap to be in 3 columns, essentially like the image I've mocked up below.
I currently have the base bootstrap navBar setup with the default code like so:
<!-- Navigation -->
<nav class="navbar navbar-expand-lg bg-white fixed-top">
<div class="container">
<a class="nav-link" href="#">my name goes here</a>
<button class="navbar-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="#">about</a></li>
<li class="nav-item"><a class="nav-link" href="#">resume</a></li>
</ul>
</div>
</div>
</nav>
I can make a weird version look right with messing with padding and stuff, but I dont want that. The hardest part for me is understanding the responsive version, and having the one link on the left (work) and two links on the right (about, resume) merge into one dropdown navigation and have the 'my name goes here' become the header above it on mobile.
Any help, or a point in the right direction would be great.
Also, it can be assumed my CSS is the base bootstrap CSS.
Thanks
UPDATE
<!-- Navigation -->
<nav class="navbar navbar-light navbar-expand-md bg-success justify-content-between">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-nav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse dual-nav w-50 order-1 order-md-0">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link pl-0" href="#">work <span class="sr-only">work</span></a>
</li>
</ul>
</div>
Colin Grant
<div class="navbar-collapse collapse dual-nav w-50 order-2">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="">about</a></li>
<li class="nav-item"><a class="nav-link" href="">resume</a></li>
</ul>
</div>
</div>
This seems to work perfectly, any tips for makign it better?
Thanks
Following is how I did it using bootstrap 4. When screen size is <992px right side of the navbar will collapse into a button.
<nav class="navbar navbar-expand-lg navbar-dark bg_color_primary sticky-top d-flex justify-content-between ">
<div class="navbar-nav col-4 align-items-start ">
<div class="text-white bg_color_primary_light rounded-circle p-2">
Work
</div>
</div>
<div class="col-4 d-flex justify-content-center">
<a class="navbar-brand text-white brand_name " href="">
BrandName
</a>
</div>
<button class=" navbar-toggler ml-auto align-items-end" 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 col-4 " id="navbarNavDropdown">
<div class="navbar-nav ml-auto ">
<a class="nav-item nav-link" href="">About</a>
<a class="nav-item nav-link" href="">Resume</a>
</div>
</div>
</nav>
I have a div containing 3 dropdowns which sit under the navbar on a normal desktop window. Additionally, I have a couple of links which are right-justified in the navbar. On a page break, I'd like for the dropdown div to collapse into the the navbar along with the right-justified links.
Here's what I have so far:
<nav class="navbar navbar-default navbar-expand-lg fixed-top navbar-dark bg-dark" role="navigation" id="topnav">
<div class="container-fluid" id="nav_content">
<a class="navbar-brand" href="#">Brand</a>
<div class="navbar-header">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navredirect,#dropdowns" aria-controls="navredirect" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div id="navredirect" class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid" id="content">
<div class="row mx-auto justify-content-center" id="dropdowns">
<!-- NOTE: dropdowns are auto-populated with a jQuery script -->
<label>Name:</label>
<select id="name"></select>
<label>State:</label>
<select id="state"></select>
<label>Item:</label>
<select id="item"></select>
</div>
</div>
Right now the redirect links in the navbar are being collapsed properly, but the dropdowns (which I assign as one of the data-targets in the collapse button) are not responding to the page break. Does Bootstrap let you move an external element into the navbar like this?
I'll figure out the eventual styling of the dropdown elements once I get them into the nav. For now I just need to get them up there and I can't figure out how for the life of me. Any ideas?