Hello Blue,
Great question there. The navigation menu is set a bit differently in this theme. I’ve struggled for years with vertically centering elements when I don’t know the height of the container.
If someone has a tall logo, then I need more space at the top of the navigation menu than if someone has a short logo.
This time around, I took a different approach. The header-content div which wraps up the logo and navigation bar is set to display: table and the logo and navigation are set to display: table-cell. This allows the use of the vertical-align: middle property so the navigation will line up in the center of the logo vertically.
If you need to change it you can. Here’s how to “reset” that:
- Go to the Theme Options page and select the Advanced tab.
- Scroll down to the Custom CSS box and paste this:
#header-content {
display: block;
}
#logo {
float: left;
display: inline-block;
}
nav#top-menu {
float: right;
display: inline-block;
}
- Update your settings.
You could then use padding on the navigation items or a top margin on the nav#top-menu to position it.
Or if you just need more space, you could add some padding to the logo without changing the display: table. Here’s what that could look like:
#logo img {
padding-top: 10px;
padding-bottom: 10px;
}
If you have any questions, just let me know.
Thanks,
Bill