Centring the Navigation Menu

  • My site is https://www.ivo.co.uk and I’m having a lot of trouble positioning the navigation menu.

    I want it to stay aligned in the centre, just like the rest of the content, like the logo and body content for example. But it seems every bit of CSS I try will not work. The navigation menu always moves separately to the rest of the content. If you change the size of the browser window you will be able to see the problem.

    I currently have the following CSS affecting it:

    .navbar .nav {
max-width: 100%;
display: block;
margin: 0px auto;
}

.navbar-wrapper .navbar-inner {
float: right;
display:block;
width: 950px;
margin: 0px auto;
}

.sticky-enabled .navbar .nav > li > a {
display:block;
margin: 0px auto;
max-width: 100%;
}

    I’m not an expert with this stuff but I’m quite intuitive. If someone could lend a hand it would be greatly appreciated. Thanks, James.

Viewing 3 replies - 1 through 3 (of 3 total)

  • are you talking about your mobile menu. I think the cause of your problem comes from the embedded video not being responsive.

    If it is the mobile menu you need to fix you will need to find the media query that deals with it.

    The media query statement will look like this.
    @media (max-width:975px)

    To center align the mobile menu you need to add this statement in your child theme.

    @media (max-width:975px{
  .navbar .navbar-inner .nav li{
   text-align:center;
  }

}

    Sorry Typo

    @media (max-width:975px){
  .navbar .navbar-inner .nav li{
   text-align:center;
  }

}

    Thread Starter IvoJames

    (@ivojames)

    I’m not talking about the mobile menu but thanks for flagging that up – I will look at sorting that out after I have the desktop version fixed which is what I’m talking about.

    I didn’t think this would be so hard to keep in alignment when all of the other elements stay centred without me having to add code?

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Centring the Navigation Menu’ is closed to new replies.