Showing collapsed Menu Items vertically with centred navbar and logo centred inside it (bootstrap)
Question
I have am making a website with a centred navbar but where the logo is also centred inside the navbar. I am using Bootstrap and LESS.
On mobile/tablet view, when the navbar is collapsed, The menu items appear horizontally and not vertically which doesn't look great
Also when in mobile/tablet view, the logo appears inside the toggle menu when you click on the 3 bars, looking even worse
The toggle menu shows when I click on it in mobile view, but it doesn't close when I click on it
I have tried adding a media query to display list items "inline-block" for devices under 752px but for some reason I just cannot get it to work.
For the logo, I have tried using the "visible-lg" class so that it is only visible on a large screen (and planned to add one only visible on a small screen) but it makes the logo appear on the right and not in the centre and I cannot seem to change this with CSS as it just stays on the right.
I would really like the logo centred inside of a centred navbar and have been trying to find solutions for days now but no code I write seems to make any difference particularly to how the menu items appear on the toggle menu. Can I make it work with this navbar? I am worried I need to start over again and forget about having the logo centred inside of it.. Any help or suggestions much appreciated
Here is the HTML for the navbar:
<nav class="navbar navbar-default navbar-fixed-top text-center">
<nav id="navbar-primary" class="navbar" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<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 navbar-collapse" id="navbar-primary-collapse">
<ul class="nav navbar-nav">
<li><a href="#" data-ajax="false">ABOUT</a></li>
<li><a href="gallery.php" data-ajax="false">OUR CARS</a></li>
<li><a href="Prices.php" data-ajax="false">PRICES</a></li>
<a href="index.php" data-ajax="false"><img src="../assets/images/logo-dark.png" width="250" alt="Logo"></a>
<li><a href="#" data-ajax="false">PACKAGES</a></li>
<li><a href="gallery.php" data-ajax="false">BLOG</a></li>
<li><a href="contact.php" data-ajax="false">CONTACT</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</nav>
CSS:
#navbar-primary .navbar-nav {
max-height:120px;
width: 100%;
text-align: center;
li {
display: inline-block;
float: none;
a {
padding-left: 30px;
padding-right: 30px;
padding-top:10px;
}
}
}
@media (max-width: 932px) {
.navbar-default .navbar-nav > li {
float:none;
display: block;
vertical-align: top;
text-align:center;
}
}
// main Header
.header {
#logo { padding:0px 0; }
}
.navbar dropdown-menu > ul
{
white-space:normal;
position:relative;
}
.downdown-menu {
white-space: normal;
position:relative;
}
.dropdown-menu > li > a {
white-space:normal;
position:relative;
}
// Remove excess borders etc
.navbar-default {
border-top:none;
border-left: 0;
border-right: none;
margin-top:0px;
padding-bottom: 0px;
font-family: 'Open Sans Condensed', sans-serif;
margin-bottom: 0;
font-size:18px;
border-color: transparent;
white-space: normal;
}
.navbar-default .navbar-nav > li
{
margin-top:20px;
}
1 answers
solution1
0 2017-01-04 21:27:15
try this navbar code for your website or use these class for responsive css
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<nav class="navbar">
<div class="container">
<a class="navbar-brand" href="index.php">Shubhsoft</a>
<div class="navbar-header navbar-right">
<ul class="nav navbar-nav">
<li><a href="index.php">Home</a></li>
<li><a href="index.php">Project</a></li>
<li><a href="index.php">Client</a></li>
<li><a href="index.php">Services</a></li>
<li><a href="index.php">Contact-Us</a></li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Wom Dropdown<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="index.php">Link1</a></li>
<li><a href="#">Link1</a></li>
<li><a href="#">Link1</a></li>
<li class="divider"></li>
<li <a href="#">Seperated link</a></li>
<li class="divider"></li>
<li <a href="#"> one more Seperated link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<script type="text/javascript" href="js/bootstrap.min.js"></script>
<script type="text/javascript" href="js/jquery.js"></script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.