[Resolved] How to do this?

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

[IMG]http://i.imgur.com/L5LEaX5.png[/IMG]

[Tom]

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.

[Diana]

Does it works? I like it!

[Tom]

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

[Author]

Posts