Archived topic
How to do this?
3 replies · Started by Connor on October 3, 2014
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]
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.
Does it works? I like it!
Not sure, it should! It may require a little bit of margin here or there, but it should definitely be a solid start :)