Black Friday Sale! Get up to $40 off GP Premium!Learn more

[Resolved] How to do this?

Home Forums Support How to do this?

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #36515
    Connor

    When I am on mobile instead of having the menu look like this (top part of image), I want it to look like this (second part of image). Is there anyway to do this? Thank you.

    #36542
    Tom
    Lead Developer
    Lead Developer

    Hmm, good question.

    I do plan on implementing more styles of mobile navigation into future versions, but for now, let’s try this..

    In GP Hooks:

    In the “Before Header” area, add this:

    <div class="custom-header-wrapper">

    In the “After Header” area, add this:

    </div>

    Now, add this CSS:

    .custom-header-wrapper { 
          position:relative;
    }
    
    @media screen and (max-width: 767px) {
          .main-navigation {
                position:absolute;
                right: 0;
                top: 0;
          }
    }

    This is untested, so tweaks will probably be necessary – but it’s a start.

    Let me know how it goes.

    #53944
    Diana

    Does it works? I like it!

    #54090
    Tom
    Lead Developer
    Lead Developer

    Not sure, it should! It may require a little bit of margin here or there, but it should definitely be a solid start 🙂

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.