[Resolved] Position the site title

[Liran]

Hey,

Is there a way to position the site title at the center, while the hamburger menu is on the left and the navigation search is on the right (both on desktop and mobile)?

Thanks!

[Leo]

Hi there,

Some CSS is required for that.

Can you first activate this option:
https://docs.generatepress.com/article/navigation-as-a-header/

And add the off-canvas menu on desktop like this:
https://docs.generatepress.com/article/off-canvas-panel-overview/#use-off-canvas-menu-only

Then activate navigation search:
https://docs.generatepress.com/article/navigation-search/

So that your header consists of the three items you want?

Then link me to your site and I’ll tackle the CSS 🙂

[Liran]

Done, I’ve also added the URL.

[David]

Hi there,

can you double check you have the Navigation as Header checked? Also whilst you’re there activate the Mobile Header making sure you add the Mobile Header logo

[Liran]

can you double check you have the Navigation as Header checked?

When this option is on, the site title disapper. I’m using the hook Tom suggested here to color the second part of my logo via HTML: html tags in site title

activate the Mobile Header making sure you add the Mobile Header logo

Tried that with site title, which made it look tiny.

[David]

Sorry missed that, try this CSS:

.site-branding {
    position: absolute;
    left: 50%;
    transform: translatex(-50%);
    z-index: 1000;
}

.main-navigation {
    width: 100%;
}

.main-navigation ul,
.inside-header {
    display: flex;
}

.main-navigation li.search-item {
    order: 2;
    margin-left: auto;
}

[Liran]

Looks fantastic on desktop. However, on tablet and mobile, there are two menus and search boxes.

[David]

Are you seeing that on the front end? Or only in the customizer?
If its a problem on the front end add back the CSS and let me know,

[Liran]

Are you seeing that on the front end? Or only in the customizer?

Both.

add back the CSS and let me know,

You can take a look now.

[David]

Aah its the blank primary nav – try adding this CSS:

.main-navigation .menu-toggle {
    display: none;
}

[Liran]

Thanks! That worked.

[David]

Glad to be of help

[Liran]

I do have a few questions:

Why does the search bar show two icons on tablet/mobile? And how can I change the background of the search query?

[Leo]

I’m not seeing 2 search icons on mobile/tablet. Have you solved this?

As for search colors, this should help:
https://generatepress.com/forums/topic/issue-with-search-field-in-primary-menu/#post-977986

[Liran]

I’m not seeing 2 search icons on mobile/tablet

Did you click the search icon?

[Author]

Posts