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 -->
Related
I am trying to show below look but not working.I have added all css and js but not working.
How to align properly nav bar and logo for mobile view and desktop and tap.
Demo: https://stackblitz.com/edit/angular-7-bootstrap-navbar-ujihha?file=src/styles.css
header.component.html:
<div id="page">
<header class="header-container">
<div class="container">
<div class="top-row">
<div class="row">
<div class="col-md-2 col-sm-6 col-xs-6">
<div id="logo">
<!--<img src="images/logo.png" alt="logo">-->
<span>Resort</span>
</div>
</div>
<div class="col-sm-6 visible-sm">
<div class="text-right"><button type="button" class="book-now-btn">Book Now</button></div>
</div>
<div class="col-md-8 col-sm-12 col-xs-12 remove-padd">
<nav class="navbar navbar-default">
<div class="navbar-header page-scroll">
<button data-target=".navbar-ex1-collapse" data-toggle="collapse" class="navbar-toggle" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navigation navbar-collapse navbar-ex1-collapse remove-space">
<ul class="list-unstyled nav1 cl-effect-10">
<li><a data-hover="Home" class="active"><span>Home</span></a></li>
<li><a data-hover="About" href="about.html"><span>About</span></a></li>
<li><a data-hover="Rooms" href="rooms.html"><span>Rooms</span></a></li>
<li><a data-hover="Gallery" href="gallery.html"><span>Gallery</span></a></li>
<li><a data-hover="Contact Us" href="contact.html"><span>contact Us</span></a></li>
</ul>
</div>
</nav>
</div>
<div class="col-md-2 col-sm-4 col-xs-12 hidden-sm">
<div class="text-right"><button type="button" class="book-now-btn">Book Now</button></div>
</div>
</div>
</div>
</div>
</header>
<!--back to top--->
<a style="display: none;" href="javascript:void(0);" class="scrollTop back-to-top" id="back-to-top">
<span><i aria-hidden="true" class="fa fa-angle-up fa-lg"></i></span>
<span>Top</span>
</a>
</div>
I'm struggling to figure out how to centre my logo in the middle of the page, whenever I try to do it with m-auto, it centres the logo between the other items... but not the page. I've tried the right:... method, but had no luck.
This is my code:
.navbar-nav {
flex-direction: row !important;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha256-eSi1q2PG6J7g7ib17yAaWMcrr5GrtohYChqibrV7PBE=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.min.css" integrity="sha256-7O1DfUu4pybYI7uAATw34eDrgQaWGOfMV/8erfDQz/Q=" crossorigin="anonymous" />
<nav class="navbar navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" onclick="openSideNav()" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<ul class="navbar-nav m-auto">
<a class="navbar-brand" href="#">
<img src="http://pngimg.com/uploads/google/google_PNG19642.png" class="img-fluid" style="max-width:300px;" alt="">
</a>
</ul>
<div class="d-none d-md-block">
<ul class="navbar-nav ml-auto">
<li class="nav-item mr-2 pr-4 my-auto">
<i class="icon-phone mr-1"></i>0122323232323
</li>
<li class="nav-item">
<a class="nav-btn btn btn-lg btn-primary" href="#booking" onclick="openNav()">Book Today <i class="ml-2 icon-calendar"></i></a>
</li>
</ul>
</div>
</nav>
To center the logo, firstly to organise it slightly better you need to make it column not row. So the the phone number and the booking button stack vertically.
Then you need to separate the areas into columns and define their widths making the two sides equal and the center whatever is left over. i.e. left 25% middle 50% and right 25%.
Here is the snippet.
.navbar-nav {
flex-direction: column !important;
justify-content: center;
}
.side {
width: 25%;
}
.middle {
width: 50%;
display: flex;
justify-content: center;
}
.flexend {
display: flex;
justify-content: flex-end;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha256-eSi1q2PG6J7g7ib17yAaWMcrr5GrtohYChqibrV7PBE=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.min.css" integrity="sha256-7O1DfUu4pybYI7uAATw34eDrgQaWGOfMV/8erfDQz/Q=" crossorigin="anonymous" />
<nav class="navbar navbar-light bg-light">
<div class="side">
<button class="navbar-toggler" type="button" data-toggle="collapse" onclick="openSideNav()" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="middle">
<div class="logo">
<a class="navbar-brand" href="#">
<img src="http://pngimg.com/uploads/google/google_PNG19642.png" class="img-fluid" style="max-width:300px;" alt="">
</a>
</div>
</div>
<div class="side flexend">
<div class="d-none d-md-block">
<ul class="navbar-nav ml-auto">
<li class="nav-item mr-2 pr-4 my-auto">
<i class="icon-phone mr-1"></i>0122323232323
</li>
<li class="nav-item">
<a class="nav-btn btn btn-lg btn-primary" href="#booking" onclick="openNav()">Book Today <i class="ml-2 icon-calendar"></i></a>
</li>
</ul>
</div>
</div>
</nav>
A similar question has already been asked: Center an element in Bootstrap 4 Navbar
I will answer it again because in this case there is a logo image.
<nav class="navbar navbar-light flex-row">
<div class="d-flex flex-fill">
<button class="navbar-toggler" type="button" data-toggle="collapse" onclick="openSideNav()" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="d-flex flex-fill justify-content-center">
<a class="navbar-brand" href="#">
<img src="http://pngimg.com/uploads/google/google_PNG19642.png" class="img-fluid" style="max-width:300px" alt="">
</a>
</div>
<div class="d-none d-md-flex flex-fill">
<ul class="navbar-nav ml-auto justify-content-end">
<li class="nav-item mr-2 pr-4 my-auto">
<i class="icon-phone mr-1"></i>0122323232323
</li>
<li class="nav-item">
<a class="nav-btn btn btn-lg btn-primary" href="#booking" onclick="openNav()">Book Today <i class="ml-2 icon-calendar"></i></a>
</li>
</ul>
</div>
</nav>
Also, check the docs for the correct Navbar structure because the way you're using the toggler, no expand class or navbar-collapse class isn't standard Navbar structure
https://www.codeply.com/go/8ik1wexpjI
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'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
I have some following HTML codes with Twitter bootstrap...
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="col-sm-4">
<img src="img/logo.png" class="img-responsive"/>
</div>
<div class="col-sm-8 col-sm-12">
<div class="col-sm-3 pull-right">
<ul class="social pull-right ul-social-link">
<li style="background: none"> <i class=" fa fa-facebook"> </i> </li>
<li style="background: none"> <i class="fa fa-twitter"> </i> </li>
<li style="background: none"> <i class="fa fa-google-plus"> </i> </li>
</ul>
</div>
<div class="col-sm-8 pull-right">
<div class="col-md-5 pull-right text-right">
<p class="contact"><span class="glyphicon glyphicon-phone-alt" aria-hidden="true"></span> +912345678910</p>
</div>
<div class="col-sm-5 pull-right">
<p class="contact"><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> mail#indtechhc.com</p>
</div>
</div>
<div class="clearfix"></div>
<div class="col-sm-12">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home<li>
<li>We are<li>
<li>Products<li>
<li>About us<li>
<li>Contact us<li>
</ul>
</div>
</div>
</div>
</div>
</nav>
But it is not working when I trigger the collapse button! please advise.
Make sure you include jquery.js and that it is before bootstrap.min.js