Docs

[iRocketdesign]

I”m using Ethos Stack, wondering if I can make the logo position like in my attachment. The client likes it splitting the nav bar and hanging down below.

http://www.stillwelljacks.com

thanks,
Rick

[Lely]

Hello Rick,

On Appearance Menu, on your Primary Menu > Between Appearance and Products, Add custom link. Let just say add logo text, then on class field add logo-menu-item. Then add the following CSS on Appearance > Customize > Custom > Edit Global CSS

.logo-menu-item a {
    text-indent: -99999px;
    text-align: left;
    width: 306px;
    height: 62px;
    background: url(http://www.stillwelljacks.com/wp-content/uploads/2016/07/Stillwell.png) no-repeat center center;
    background-size: contain;
}

See attached screenshot. If CSS CLASSES is not available, click Screen Option at the upper right part of the page.

Hope this helps.

[iRocketdesign]

This is what I get after doing what you suggested. I (will obviously remove my header logo in time) but I want the logo in the nav bar to be the same size as the logo I see in the header. I’ve messed with your settings but it won’t change size. See the original attachment that I sent for visual reference please.

thanks!

[iRocketdesign]

If I remove background-size: contain; it makes the logo the correct size, but it needs to be completely visible overlapping the header and the slider under the nav bar.

[iRocketdesign]

I want it to look like this…but the logo over the nav bar and the menus split to make room for the logo.

[iRocketdesign]

Here is where I’m at. Please help me to now make the logo larger and overlapping the menu bar. Also, there was some text that appeared in the logo bar, which I’ve made transparent to hide it, hopefully it won’t cause issues when scaled to mobile devices.

thanks,
Rick

[iRocketdesign]

Latest update…I have the logo doing what I want. I just would like to slide only the log0 up a little bit. I like my logo bar spacing but just would like to move the logo up, and leave the nav bar the way it is.

thanks!

[Rue Nel]

Hello There,

Thank you for the updates! To resolve this issue and move up the logo, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.site .logo-menu-item a {
    margin-top: -30px;
}

@media(max-width: 979px){
    .site .logo-menu-item {
        display: none;
    }
}

This code will also remove the logo on smaller devices. Hope this helps.

[iRocketdesign]

Awesome, thank you!

[Prasant Rai]

You are most welcome. 🙂

[iRocketdesign]

Sorry to chime back in but I have another question. See attached please. Wondering why the logo is not centered? All type is centered and it seems to be off a bit?? Also I see a faint white vertical line next to the logo, can I get rid of that?

thanks
Rick

[iRocketdesign]

I can adjust each page with a negative left margin, but is that the best, most consistent way to fix it?

[Nabeel A]

Hi again,

I’ve checked the logo and it is centered. To remove the logo border, you can add the following code in your Customizer:

.x-navbar .desktop .x-nav > li.logo-menu-item > a {
    border-right: none !important;
}
li#menu-item-290 {
    border-left: 1px solid rgba(255,255,255,0.1) !important;
}

Let us know how this goes!

[Author]

Posts