I'm trying to make a Bootstrap navbar that contains icons on the right and left with a centered title. I'm not able to get the text to center properly.
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar navbar-fixed-top">
<div class="navbar-header pull-left">
<i class="fa fa-bars fa-lg" aria-hidden="true"></i>
</div>
<!-- Center the contents of this element in the navbar -->
<div class="navbar-header nav-element-center">
<span class="h4 ">Centered Title</span>
</div>
<div class="navbar-header pull-right">
<i class="fa fa-user-plus" aria-hidden="true"></i>
</div>
</div>
</div>
</nav>
test example: https://jsfiddle.net/goyosoyo/aw0219a4/
Note: I've given the divs a colorized border so that I could see what was happening.
What am I missing?
You can do it like this:
HTML:
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar navbar-fixed-top">
<div class="navbar-header pull-left">
<i class="fa fa-bars fa-lg" aria-hidden="true"></i>
</div>
<div class="navbar-header pull-right">
<i class="fa fa-user-plus" aria-hidden="true"></i>
</div>
<!-- Center the contents of this element in the navbar -->
<div class="nav-element-center">
<span class="h4 ">Centered Title</span>
</div>
</div>
</div>
</nav>
CSS:
.nav-element-center {
text-align: center;
margin-top: 14px;
}
JSFIDDLE
Related
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.
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 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;
}
I was wondering if someone knows how I cam accomplish this using Bootstrap 3 while not hacking it.
As you can see from the picture below I'd like to have an inverted navbar at the top. Underneath I'd like to have a bar with black bg that only goes so far (for instance 4 columns with dark bg and the remaining 8 columns with light bg). That's the easy part. The problem I've found is how have the container bg have different colour of background.
At the moment I have this:
That's been achieved using this code:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container nt-container">
<div class="nt-header-top row">
<div class="col-md-4">
<h1 class="nt-logo">New Project</h1>
</div>
<div class="col-md-8 text-right">
<h3>Some slogan here</h3>
</div>
</div>
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="row">
<div class="col-md-2">
<ul class="nav navbar-nav">
<li class="active"><span class="glyphicon glyphicon-home"></span></li>
<li><span class="glyphicon glyphicon-list"></span></li>
<li><span class="glyphicon glyphicon-envelope"></span></li>
</ul>
</div>
<div class="col-md-10 nt-top-title-bar">
<section class="row">
<div class="col-md-8 more-padding-left">
<h2 class="">Some slogan here</h2>
</div>
<div class="col-md-4 text-right">
<ul class="nav navbar-nav navbar-right">
<li class="active"><span class="glyphicon glyphicon-home"></span></li>
<li><span class="glyphicon glyphicon-list"></span></li>
<li><span class="glyphicon glyphicon-envelope"></span></li>
</ul>
</div>
</section>
</div>
</div>
</div>
<div class="container nt-container">
<div class="row">
<section class="col-md-2 nt-side-menu-section">
<ul class="list-group">
...
</ul>
</section>
<div class="col-md-5 more-padding-left">
<h2>Heading 1</h2>
<p>...</p>
</div>
<div class="col-md-5">
<h2>Heading</h2>
<p>...</p>
</div>
</div>
<hr>
<footer>
<p>© Company 2013</p>
</footer>
I though maybe I could add div on the right gutter with a light background on top of the container background, but I thought this very hackish and inelegant.
Any suggestions on how to achieve this?
Ok...if I have this right the element in question has a class of .nt-top-title-bar.
You can do this with a pseudo element by adding:
.nt-top-title-bar:after {
content: "";
position: absolute;
background: insert your color here; /* Match the background of menubar*/
top: 0;
bottom: 0;
width: 9999px; /* some huge width */
left: 100%;
}
Codepen Example
CSS-Tricks Reference