How to align the main logo with the secondary menu on header

Hey,
The demo is using the primary menu. It looks like you’re using the secondary. Set your menu to primary from Appearance > Menus then you can use the following css to decrease the space in between the menu items.

.sf-menu a {
    padding: 10px 10px;
}

Just paste that into your custom css box in Appearance > Theme Options > Advanced Settings.
Hope it helps!

Hannah

Hi! It worked! Just two more things… I want the menu to appear only in one row and much closer to the logo (50% more to the left)

Could you help me?

Thank you so much!

Try using this css:

.col-md-6.clearfix.kad-header-left {
    width: 25%;
}
.col-md-6.kad-header-right {
    width: 75%;
}

Hannah

Oh sorry, use this instead:

@media (min-width: 992px) {
.col-md-6.clearfix.kad-header-left {
    width: 25%;
}
.col-md-6.kad-header-right {
    width: 75%;
}
}

Hannah

Thanks! I tried both but none of them worked, I just copy-paste the content on my CSS editor.

Any reason why you didn’t add all of Hannah’s CSS? You missed the @media part of it.

You’re also not closing another media query properly. This:

@media (max-width: 768px) {
.topbarmenu ul li a {
padding:7px 5px;
font-size:10px;
}

I believe should be this:

@media (max-width: 768px) {
.topbarmenu ul li a {
padding:7px 5px;
font-size:10px;
    }
}

Try making those changes and let me know if it works properly.

-Kevin

Hi Kevin, I made the change but it doesn’t work ?? I don’t know anything about CCS so I only copy-paste the content of the code you send me.

First time I tried with

.col-md-6.clearfix.kad-header-left {
width: 25%;
}
.col-md-6.kad-header-right {
width: 75%;
}

And then I saw the second answer, so I erased that code and copy-paste

@media (min-width: 992px) {
.col-md-6.clearfix.kad-header-left {
width: 25%;
}
.col-md-6.kad-header-right {
width: 75%;
}
}

But nothing… NOw I tried with the one ypu sent me but my home looks just the same

Have you tried clearing your cache after adding the code?

Hannah

Yes! From my navigator

I’m not seeing the code in your css. Are you adding it to your custom css box in Appearance > Theme Options > Advanced Settings?

Hannah

Thank you both! I had a query wich wasn’t close properly (Thanks Kevin, at first I though you were refering to the one Hanna sent me), and I was using the wrong first code from Hanna, not the second.

So, shame on me! hehe Also, in the meanwhile, my WP finally got update to the last version.

I re-checked everything and fix the mistakes and now it shows the menu on the same row.

Is there anything I could use to align the menu with the center of my logo? Horizontally

Thank you so much for your help!

Glad to hear it!
You can align the menu left with this css:

#nav-main {
    float: left;
}

Is that what you mean?

Hannah

Yes, perfect. Thank you!