Docs

[Trevor M]

Loving the Superfly menu that comes with X. I want to add my logo (with a home button link) over a squared background to the left of the hamburger menu button. I want it to stay connected with the button as the page is scrolled.

This is what i want to replicate: http://bravepeople.co / The hover effect on logo is not necessary, but would be a bonus.

Is this something themeco can help with?

[Joao]

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[Trevor M]

This reply has been marked as private.

[Trevor M]

If I can achieve this, then I would like to disable the menu bar as well.

[Trevor M]

Here is a photo mockup if this helps.

[Lely]

Hello Trevor,

That option is not available when I checked. But then let’s try using custom CSS. Add the following on Appearance > Customize > Custom > Edit Global CSS:

.sfm-navicon-button {
    margin-left: 64px;
    position: relative;
}
.sfm-navicon-button:before {
    background-image: url(http://riveteng.com/wp-content/uploads/2017/02/Rivet-E-Logo.png);
    background-size: cover;
    background-position: 50% 50%;
    position: absolute;
    left: -64px;
    width: 64px;
    height: 63px;
    content: '';
}

Adjust the values accordingly.

Further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding.

[Trevor M]

Lely, I was able to add a background color, and leave margin space on the logo image itself to achieve exactly what I was hoping for. Thank you for the help, the code worked great!!

[Lely]

You’re always welcome Trevor!

Cheers.

[Author]

Posts