Help with centering menu vertically


#1

I am setting this up for a client and he would like the menu dropped down to where it is even with the logo. I have played around with the css some but cannot find the right place to do this.what client wants

Thank you in advance.


#2

Hi,

You can center logo and menu from Appearance > Customize > Header Area > Menu style and choose Centered (menu and site logo).

Best Regards


#3

I don’t think you looked at what I showed in the picture… that centers it horizontally with the logo on top… I want to center it in the middle of the container its in… just need a hint to where this is in the css code as I have tried several places and it never budged.


#4

Fixed it myself… for anyone else who is not happy with having a larger logo and the menu looking askew find
#mainnav {
display: block;
add------------> margin: 20px; <---------whatever px you need


#5

Hello lauraco,

I know what you’re trying to do, I did the same on my website.
Do you know how to handle a child theme or using a custom css plugin?

I solved that width the following code:

.col-md-8 {
  margin-top: 25px;
}
#mainnav ul li a {
  font-size:20px
}

Now the links in the navigation are quite bigger (that looks better, trust me!). Also because the row in which the navigation is placed in has a margin-top of 25px, that moves the links (nearly?) in the middle. That looks quite good.

There might be some different code for you. It is really helpful if you send us a link to your page (maybe as a private message if this works here?). Maybe you code has to be different because of different logo sizes and more.

You could also give the navigation this:


.col-md-8 {
  line-height: /*the height of your logo (.col-md-4) - in the sydney demo in would be 53px*/;
  vertical-align: center;
}

Please check this different variations out and leave us a note whether it worked or not. Then we might need more than a screenshot.

Best regards

Edit: Okay, I guess I was a bit late. But this comes nearly with my first solution.


#6

You were probably typing that all out when I found my solution. But hey Thanks! you took time to provide a solution and in the future anyone else who needs to make these changes :slight_smile:


#7

I think so :smiley: Then I just can hope that the future guys use the search. Good luck with your site.


#8

Hi,

Sorry for misunderstanding. theme is built on bootstrap framework so you can check classes here http://getbootstrap.com/ if you want. Logo wont budge because it is wrapped inside column.

As I see it now it can be done if you edit header.php file and change logo and menu columns classes to use col-md-6 to be equal. Also you can add for example .logo-push class to logo column, and at the end you can apply custom css code below. Everything is wrapped within @media query in order to target normal menu and not toggle menu

@media (min-width:1025px) {
    .logo-push a {
        display: block;
        float: right;
    }

    .col-md-6.col-sm-6.col-xs-12 nav#mainnav{
        float: left;
    }
}

And result should look like this http://screencast.com/t/x34gWkLaAn

Best Regards


#9

Ops,

Here are classes which you have to use inside header.php file http://screencast.com/t/oNkpvpgh5Wc

Best Regards


#10

Glad to hear that you have managed to fix it by yourself,

Best Regards