[Resolved] Header Customization

[Vadims]

Hello Tom,

I have a specific vision for a website header and I really need your help and also Leo’s, if he’s around, because there is a lot of stuff.

I have edited pictures in order to show you what I mean, so that it is easier to understand.

1. I would like to move navigation menu higher, inline with the website name – like so (https://ibb.co/n3r3SR) and I would like to change the position of the tagline (move it left, right, higher, lower).

2. I would like to have a mobile navigation on desktop, the default one, not the slideout menu – like so (https://ibb.co/gmqmgm)

3. I would like search icon to always be to the right side, like in the pictures, but when you click the navigation or search icons, search box will appear in the drop-down menu.

Thank you very much.

[Tom]

Hi there,

Tough questions!

1. You could try this:

.site-header {
    position: absolute;
    left: 50%;
    margin-left: -155px;
}

The 155px is half the width of your site title element.

2. You can initiate the mobile menu at a higher width like this: https://docs.generatepress.com/article/mobile-navigation/#initiating-the-mobile-navigation-at-a-different-width

We’re hoping to make it easier soon 🙂

3. Do you have an example I can look at? I’m not quite getting it yet.

[Vadims]

Hello Tom,

thank you for the codes.

I do have an example, this website – https://www.lifewire.com/

Basically I want to make the header and sticky menu in a similar way, including dropdown menu and search box. I do not want to replace anything that I already have thought, just change it for my liking and this website just happens to have a lot of functions that I had in mind myself.

[Tom]

The code I gave you should handle the header stuff.

The dropdown/overlay is a little too advanced to help out with in the forums I’m afraid – you may need to hire a contractor to code that up for you.

[Vadims]

Hello Tom,

cool, thank you for your help.

And one more quick thing, what is the code to adjust the position of the tagline? I want to bring it up higher and a bit to the right.

[Tom]

You could try something like this:

.site-description {
    position: relative;
    top: -10px;
    right: -30px;
}

[Vadims]

Tom,

awesome man, thank you very much.

[Tom]

You’re very welcome 🙂

[Author]

Posts