Site logo

Archived topic

menu and mobile menu logo in one line

7 replies · Started by Anna on January 4, 2019

Viewing posts 1–8 of 8

Hello,

I have a problem with the header.
I would like to put three things in the header:
logo on the left main menu in the middle and mobile menu on the right with its own icon. I want everything to be equally.
Please help. I am sending the photo in the attachment.

Hi there,

is the Site URL you provided your Site or how you want your Site to look?

This is my site.

Can you send the image of how you want it to look just so we are clear :)

So try this CSS for the menu alignment:

.inside-header, .main-navigation ul:not(.submenu) {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
#site-navigation {
    width: 100%;
}
.main-navigation li:first-child {
    margin-left: auto;
}
.main-navigation li.slideout-toggle {
    margin-left: auto;
}
.site-logo {
    width: 140px; /* adust width to same as slideout toggle and search icon */
}

If you want to use an image for the slideout icon then this CSS is your starting point:

.slideout-toggle a:before {
    content: url('image-url');
}

Perfectly!
Thank you very much for your help!

Glad to be of help

This archived topic is closed to new replies.