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.

Problem

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

My solution

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;


}

score 0 · Answer 1 · answered Jan 04 '17 at 21:27

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>

Thanks, but this puts the logo on the left and the navbar menu items on the right - I know how to do this but would really like it as mentioned - central navbar with logo centred inside it. Thanks for your suggestion though — ck777, Jan 04 '17 at 21:38
i.stack.imgur.com/DpZ8I.png this is what I want and have BUT the problems as listed above mean on collapse the menu items show horizontally with logo in the toggle menu. — ck777, Jan 04 '17 at 21:44
http://stackoverflow.com/questions/18777235/center-content-in-responsive-bootstrap-navbar — ANSHUL GERA, Jan 04 '17 at 21:52
I have read this and tried methods from this question (some bits are still there) but it isnt working for me — ck777, Jan 04 '17 at 21:55

Showing collapsed Menu Items vertically with centred navbar and logo centred inside it (bootstrap)

1 Answers1