I have a website with a horizontal navbar, works fine. At the appropriate breakpoints it collapses and you open it via the hamburger button.
Underneath I have a bootstrap row:
<div class="row">
<div class="col-xl-2 px-0">
<div class="container-fluid">
<div class="container show-not-on-mobile text-center pt-5"> <h5>Paintings</h5></div>
<nav class="navbar navbar-expand-xl navbar-light navbar-custom">
<div class="container mb-0 px-0 show-not-on-desktop">
<a class="navbar-brand" href="/paintings">Paintings</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mnav" aria-controls="mnav" aria-expanded="false" aria-label="Toggle navigation">
<span class="fancy-toggler navbar-toggler-icon"></span>
</button>
</div>
<div class="container mb-0 px-0">
<div class="collapse navbar-collapse" id="malereinav">
<ul class="navbar-nav mr-auto mx-auto flex-column">
<li class="nav-item">
<a class="nav-link active rounded" title="Movement" href="/paintings-movement">
Movement
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<div class="col-xl-10">
Gallery Content shown with #Columns
</div>
</div>
Everything works fine, except this breakpoint:
#media screen and (min-width:992px) and (max-width: 1280.98px){
#columns[data-columns]::before {
content: '3 .col-lg-4';
}
}
At this breakpoint nothing happens with this navbar:
neither the navbar is displayed horizontally nor vertically.
Also no mobile version with hamburger is displayed.
No matter if I use navbar-expand-xl or navbar-expand-lg or navbar-expand-md ...
Maybe someone has an idea, I would be very happy.
Related
Here I given d-flex and justify-content-between class in the parent tag of a and div . but I cannot understand why its not working here..
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container d-flex justify-content-between">
<a class="navbar-brand" href="#">
<img width="100%" height="50" src="icons/Logo.png">
</a>
<div class="collapse navbar-collapse" id="navbarScroll">
<h1>Right</h2>
</div>
</div>
</nav>
so with your supplied code, you just need to add justify-content: flex-end to the .navbar-collapse section.
To complete your provided code sample, you would just add the bootstrap class justify-content-end to the right hand second, shown below
<div class="container d-flex justify-content-between">
<a class="navbar-brand" href="#">
<img width="100%" height="50" src="icons/Logo.png">
</a>
<div class="collapse navbar-collapse justify-content-end" id="navbarScroll">
<h1>Right</h1>
</div>
</div>
Shown in this codepen
Using Bootstrap 4.3 to make a responsive dashboard, I ran into a problem with medium screens. When I resize Google chrome to check the page in different sizes, sadly, the bootstrap toggle button appears when chrome is resized to medium. This is the case with other browsers as well. The following picture is my chrome showing the page. As in the picture, the screen is not that small for the content to disappear and for the toggle button to show up:
The followings are my codes. I would be really grateful if you help me solve the problem.
#media (max-width: 768px) {
.sidebar {
position: static;
height: auto;
}
.top-navbar {
position: static;
}
}
.top-nav-height {
height: 3em!important;
}
.sidebar {
box-sizing: border-box;
background-color: #34495e !important;
height: 100vh;
}
<body dir="rtl">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light p-0 m-0">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#goNavBar" aria-controls="goNavBar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="goNavBar">
<div class="container-fluid">
<div class="row">
<!-- Sidebar -->
<div class="col-md-2 col-xl-2 col-md-5 sidebar p-0 m-0">
ِDashboard
<div id="NavBarParent">
<ul class="navbar-nav flex-column">
<li class="nav-item rtl d-block">
<i class="fas fa-home ml-2"></i>Home
</li>
</ul>
</div>
</div>
<!-- Sidebar Done -->
<!-- Top Bar -->
<div class="col-md-10 col-xl-10 col-md-7 py-3 top-navbar">
<div class="row align-items-center">
<div class="col-md-4 col-sm-4 col-lg-5 col-xl-5">
<h4></h4>
</div>
<div class="col-md-5 col-sm-4 col-lg-5 col-xl-5">
</div>
<div class="col-md-3 col-sm-4 col-lg-2 col-xl-2" >
<ul class="navbar-nav">
<li><span class="fa-layers fa-fw fa-lg" >
<i class="fas fa-envelope py-1" style="color: #34495e"></i>
<span class="fa-layers-counter fa-lg bullet-sizing">45</span>
</span></li>
<li><span class="fa-layers fa-fw fa-lg mr-2" >
<i class="fas fa-bell py-1" style="color: #34495e"></i>
<span class="fa-layers-counter bullet-sizing fa-lg">2</span>
</span></li>
<li class="nav-item mr-auto"><i class="fas fa-sign-out-alt fa-lg" style="color: #34495e"></i></li>
</ul>
</div>
</div>
</div>
<!-- Top Bar Done -->
</div>
</div>
</div>
</nav>
<!-- Navigation Done -->
For the sake of convenience, I deleted some lines from sidebar menu items, as I think they don't have anything to do with the sizing and toggle button.
Wow, the problem was on the very first line. Changing the 'navbar-expand-lg' on the first line of code into 'navbar-expand-sm' solved my issue.
You need to change navbar-expand-(value)Ex lg/md/sm or custom.you can try this i have added with your code.
<body dir="rtl">
<!-- Navigation -->
<nav class="navbar navbar-expand-md navbar-light p-0 m-0">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#goNavBar" aria-controls="goNavBar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="goNavBar">
<div class="container-fluid">
<div class="row">
<!-- Sidebar -->
<div class="col-md-2 col-xl-2 col-md-5 sidebar p-0 m-0">
ِDashboard
<div id="NavBarParent">
<ul class="navbar-nav flex-column">
<li class="nav-item rtl d-block">
<i class="fas fa-home ml-2"></i>Home
</li>
</ul>
</div>
</div>
<!-- Sidebar Done -->
<!-- Top Bar -->
<div class="col-md-10 col-xl-10 col-md-7 py-3 top-navbar">
<div class="row align-items-center">
<div class="col-md-4 col-sm-4 col-lg-5 col-xl-5">
<h4></h4>
</div>
<div class="col-md-5 col-sm-4 col-lg-5 col-xl-5">
</div>
<div class="col-md-3 col-sm-4 col-lg-2 col-xl-2" >
<ul class="navbar-nav">
<li><span class="fa-layers fa-fw fa-lg" >
<i class="fas fa-envelope py-1" style="color: #34495e"></i>
<span class="fa-layers-counter fa-lg bullet-sizing">45</span>
</span></li>
<li><span class="fa-layers fa-fw fa-lg mr-2" >
<i class="fas fa-bell py-1" style="color: #34495e"></i>
<span class="fa-layers-counter bullet-sizing fa-lg">2</span>
</span></li>
<li class="nav-item mr-auto"><i class="fas fa-sign-out-alt fa-lg" style="color: #34495e"></i></li>
</ul>
</div>
</div>
</div>
<!-- Top Bar Done -->
</div>
</div>
</div>
</nav>
<!-- Navigation Done -->
I'm trying to get a picture (below I've tested with a single background color) to cover the navbar aswell as the showcase/jumbotron. However I can't get it to cover both correctly and the navbar is left untouched - even if I create a div that surround the navbar and jumbotron and assign a background picture to this.
Additionally when I try a picture it is stretched in a rather random way across the showcase, how do I get this to cover the elements correctly ?(image size is 1400x693 svg).
<header class="nav-header">
<nav class="navbar navbar-expand-md navbar-light bg-light">
<div class="container">
<span class="navbar-brand"><i>Logo</i></span>
<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="navbar-collapse collapse">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="#">How it works</a></li>
</ul><!--//nav-->
<ul class="nav navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">My Profile</a>
</li>
<li class="nav-item">
<a class="btn btn-outline-success" href="#">Log out</a>
</li>
</ul>
</div>
</div>
</nav><!--//header-->
</header>
<section>
<div class="showcase">
<div class="container">
<div class="jumbotron jumbotron-fluid showcase-content text-white">
<div class="row">
<div class="col-lg-6">
<h2 class="display-4">Some title.</h2>
<p class="lead">Some additional showcase text.</p>
<p>
<a class="btn btn-secondary text-white " href="#">Get Started -></a>
</p>
</div>
<div class="col-lg-6">
<image></image>
</div>
</div>
</div>
</div><!--//container-->
</div>
</section><!--//promo-->
Css
.showcase {
background-color: red;
background-size: cover;
}
.nav-header {
background-color: transparent;
}
.showcase-content {
background-color: transparent;
}
Codepen:
https://codepen.io/anon/pen/vjqvEE
The issue was having bg-light within the navbar which was overriding assigning the colour to the navbar too.
I am using bootstrap navbar, it has brand name on left and 2 icons glyphicon glyphicon-user and glyphicon glyphicon-bell on right.
When i am changing the resolution to less than 768, the brand name and both the icons are getting vertically aligned and height of navbar increases.
I do no want a collapse bar. and i want the icons to be fixed at right.
#Lior G is right, you can use default bootstrap styles (classes) to resolve your issue!
<nav class="navbar navbar-default navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header pull-left">
<a class="navbar-brand" href="#">Brand</a>
</div>
<ul class="nav navbar-nav mobileNav pull-right">
<li class="pull-left">
<span class="glyphicon glyphicon-bell" aria-hidden="true" style="font-size:26px; color:white"></span>
</li>
<li class="pull-left">
<i class="glyphicon glyphicon-user" aria-hidden="true" style="font-size:26px; color:white"></i>
</li>
</ul>
</div><!-- /.container-fluid -->
</nav>
jsfiddle-link
Use pull-left and pull-right with 2 navbar-header div's, since they do not attached to any #media queries.
Try this
<div class="navbar navbar-fixed-top">
<div class="navbar-header pull-left">
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="navbar-header pull-right">
<button type="button" class="btn btn-default navbar-btn"><span class="glyphicon glyphicon-user"></span></button>
<button type="button" class="btn btn-default navbar-btn"><span class="glyphicon glyphicon-bell"></span></button>
</div>
Working Codepen
I'm trying to create a boostrap navbar with a small square logo on the left, text (company name) to the right, and then navbar on far right. Here's code so far, I just can't figure out how to add the text.
When it goes down to XS, I need the logo and text to remain on the same line. So, I made the logo image a full width transparent PNG (to hold the column in place) and tried to add text to the right of the logo (still over the transparent part) but I can't figure this out.
Any help would be great. Here's code so far:
<div class="header">
<div class="container">
<div class="row">
<div class="col-md-5 col-sm-5">
<div class="logo"><div style="height:50px; width:150px; position:absolute; border:solid 1px red;"></div><a href="<?php echo site_url(); ?>/"><img src="<?php echo get_template_directory_uri(); ?>/images/logo_small.png"
class="img-responsive"></a></div>
</div>
<div class="col-md-7 col-sm-7 hidden-xs">
<!-- Navbar Start Here -->
<div role="navigation" class="navba-r navbar-default">
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#"></a>
</div>
<nav role="navigation" class="collapse navbar-collapse navbar-left">
<ul class="navbar-nav nav aa">
<li>COMPANY</li>
<li>PEOPLE</li>
<li>PATIENTS</li>
<li>CONTACT</li>
</ul>
</nav>
</div>
</div>
<!-- Navbar End Here -->
</div>
</div>
</div>
</div>
I put together a fiddle for you. I included the logo and title inside the nav. The key was adding the class pull-left to the href around the image.
https://jsfiddle.net/msm6jozL/7/
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="logo pull-left" href="#"><img src="https://placehold.it/150x30"></a>
<span class="name pull-left">COMPANY NAME</span>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>COMPANY</li>
<li>PEOPLE</li>
<li>PATIENTS</li>
<li>CONTACT</li>
</ul>
</div>
</div>
</nav>
</div>
.logo {
padding: 10px 10px 0 10px;
}
.name {
font-size: 14px;
color: #333;
padding-top: 15px;
}