[Resolved] Header/Menu confusion

[BeeLady11]

Hi
I have been building a one page site. I have GP premium.
I seem to have managed to get a hamburger on RHS of the menu that slides a blank column in from left. I can’t see how to get rid of it.
Also, I have tried to get the tagline under the logo but it is over to the right of it.
I have used Elementor to give me some more options, etc.
Any help appreciated, I feel I’m struggling with this.

Thanks

[Tom]

Hi there,

That hamburger is the off canvas menu: https://docs.generatepress.com/article/off-canvas-panel-overview/

Turning that off will remove it.

Try adding this CSS for the tagline:

.site-description {
    clear: both;
}

[BeeLady11]

Thanks for that. Hamburger gone!
The tagline (site description) has moved down, but is there a way to centralise it under the logo? It’s just sitting in the middle at the moment.

I would like to move the logo up, in line with the navigation and have the ‘tagline’ centralised under the logo, without too much white space top and bottom.

Thanks again.

[Tom]

You could try changing your CSS to this:

.site-description {
    clear: both;
    text-align: center;
    max-width: 170px;
}

Then you’d need to move the navigation back to float right (it’s currently set above the header).

[BeeLady11]

Hi
I tried that but the only way I could get the ‘tagline’ to centre under the logo without a line break was to make the logo big. I’ve managed to pull down the navigation so it’s not jammed up the top or bottom of the header, but the layout on mobiles/tablets now looks terrible.
Is there any way of having that tagline on one line (on PC view) and centralised under a smaller logo + the whole lot nicely laid out on a mobile/tablet (fine for the ‘tagline’ to line-break on smaller screens)?
(I also can’t get rid of the padding under the tagline)

The current CSS looks like this:
.site-description {
clear: both;
text-align: center;
max-width: 360px;
}

@media (min-width: 870px) {
.nav-float-right .inside-header .main-navigation {
margin-top: 90px;
}
}

Thanks for your patience!

[Tom]

I wonder if instead of using the standard tagline, you did this:

1. Create a Hook Element: https://docs.generatepress.com/article/hooks-element-overview/
2. Set the hook to after_logo
3. Add this as the content:

<p class="site-description">Your description here</p>

Then set the Display Rules to the entire site.

Let me know 🙂

[BeeLady11]

Hi – thanks for sticking with this.

That sort of made it worse. I had already used that but with a different hook. The tagline is off. It’s why I’ve been putting it in quotes (‘tagline’), sorry if I wasn’t clear.
What I want it to look like is at https://www.risksolutions-security.net/ – but this site is horrible and I don’t want the ‘tagline’ as part of the logo image. I try not to have text as images. If you just look at the header, this is the sort of layout I want.
Would it help if I gave you login info so you could see what I’ve been doing?

Thanks for your help

[Leo]

Sorry what’s the reason behind not using text in the image? We actually recommend that method for cases like this as it’s just easier to deal with responsive-wise. See the first sentence here:
https://docs.generatepress.com/article/putting-site-title-next-logo/

[Leo]

If you still want to use the text method, give this a shot:

– Create a new hook element with before_header_content hook.
https://docs.generatepress.com/article/hooks-element-overview/

– Add this as the content and replace the neccessary fields:

<div class="site-identity">
    <a href="URL TO YOUR WEBSITE" title="YOUR SITE NAME" rel="home">
        <img class="header-image" src="URL TO LOGO IMAGE" alt="YOUR SITE NAME" title="YOUR SITE NAME">
    </a>
    <p class="tagline">
        ENTER YOUR TAGLINE HERE
    </p>
</div>

– Then this CSS:

.site-identity {
    float: left;
    display: flex;
    flex-direction: column;
    align-items: center;
}

I still think including it the tagline in image would work a bit better though.

[BeeLady11]

Hi
Thanks for the help!
I’ve gone with your suggestion and built the text in with the logo, as the other solutions don’t seem to work very consistently.

Thanks again for your patience
🙂

[Leo]

No problem 🙂

[Author]

Posts