Centre logo in header

[BRWilliams]

Hi there-

I am looking to place the logo in the centre of the menu (with two links on either side), but at the same height as the menu bar links, not above.

is this possible?

[sharmstr]

Interesting. I’ve never tried this, but it seems to work.

First, go to theme options > Header Options and choose the third header layout that has the logo and the menu in the center.

Then go to Theme Options > General and add this css

COPY CODE

@media (min-width: 992px) {
.navbar-header .logo {
    display: none;
}
#undefined-sticky-wrapper {
    height: 88px !important;
}
.navbar-header {
    height: 0px !important;
}
}

Then go to appearance > menus. Add a custom link with a url to your site, then add this for the title and move it to the middle of your menu.

COPY CODE

<img id="logo_img" title="Derek Ford Studios | Commercial and 
Editorial Photographer and Director based in Victoria, BC" 
src="http://www.derekford.com/wp-content/uploads/2015/11/DFS-Logo-Final_1LINE_POS-2.png" alt="Derek Ford Studios | Commercial and Editorial Photographer and Director based in Victoria, BC" style="max-height: 60px;">

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[sharmstr]

I found a small issue with the css, so try this css instead.

COPY CODE

@media (min-width: 992px) {
.navbar-header .logo {
    display: none;
}
#undefined-sticky-wrapper {
    height: 88px !important;
}
.navbar-header {
    height: 0px !important;
}
#header {
    margin-bottom: 20px;
}
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[Author]

Posts