[Support request] Put inside of

Home Forums Support [Support request] Put inside of

Home Forums Support Put inside of

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #495600
    Matthew

    For layout purposes (i want a translucent background on the nav to overlay the background on the header section), I was wondering if it’s structurally possible to move the main, top <nav> inside of the <header> just above it? Current it is <header></header><nav></nav>, and I would like it to be <header><nav></nav></header>.

    I’m using the child theme, so I’m guessing I need to find the correct file to edit from the main theme, move it into the child theme, and then edit… but I’m unsure exactly which files and where to edit.

    Thank you very much!

    GP Premium 1.5.6
    #495601
    Matthew

    When I posted this, it took <nav> and <header> out of my subject line… sorry about that. I don’t see a way to edit the subject/topic now.

    #495686
    Leo
    Staff
    Customer Support

    Hi there,

    I’m not quite sure what you mean.

    What are you trying to achieve?

    Would GP hooks help at all?
    https://docs.generatepress.com/article/hooks-overview/
    http://demo.generatepress.com/hook-locations/

    #495748
    Matthew

    I want to put the top <nav> inside of the <header> at the top of the site. Currently it is outside of it when I look at the source code.
    So basically I want to move to code for <nav> to be up inside <header> so the structure would be:

    <header>
    <nav> </nav>
    </header>

    #495767
    Leo
    Staff
    Customer Support
    #496221
    Matthew

    Thank you for the replies.

    I don’t want it to float right in that space… I would like my top nav / menu to be beneath my logo, so that I have space to the right of the logo for an advertisement.

    Any further thoughts?

    Thank you very much.

    #496875
    Tom
    Lead Developer
    Lead Developer

    Hi Matthew,

    The easiest thing to do here is to use hooks.

    1. Open your container in the Before Header hook:

    <div class="header-container">

    2. Close it in the After Header hook:

    </div>

    Then style the container:

    .header-container {
        background-image: url(URL TO YOUR IMAGE);
    }
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.