[Resolved] Header/Menu confusion

Home Forums Support Header/Menu confusion

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #895703
    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

    #895784
    Tom
    Lead Developer
    Lead Developer

    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;
    }
    #897003
    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.

    #897062
    Tom
    Lead Developer
    Lead Developer

    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).

    #897197
    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!

    #897298
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #897594
    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

    #898075
    Leo
    Staff
    Customer Support

    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/

    #898083
    Leo
    Staff
    Customer Support

    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.

    #900424
    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
    🙂

    #900434
    Leo
    Staff
    Customer Support
Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.