[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 87
  • Last Modified:

reposition hamburger icon to top of screen

On my wordpress site, I would like to MOVE the hamburger icon on mobile devices to be at the top of the screen ABOVE the logos.

screen shot of my goal
http://screencast.com/t/HiqYrX3jB

Beta site
http://36a.ed7.myftpupload.com
0
nsitedesigns
Asked:
nsitedesigns
  • 2
  • 2
3 Solutions
 
nsitedesignsAuthor Commented:
I tried putting the following code in but it didn't help
position: absolute;
top: 0;

Open in new window

0
 
Scott Fell, EE MVEDeveloperCommented:
I think you want to move  your div.responsive-menu-icon physically to where you want it in your code
0
 
nsitedesignsAuthor Commented:
I don't think i can do that with wordpress.
0
 
Prasadh BaapaatWeb Designer & DeveloperCommented:
What Scott says is correct...

Another method will be to copy the NAV code & paste it on top of header code (duplicate) & show it ONLY on resolutions below 768 pixels and hide the bottom menu using bootstrap hide / show classes.

BUT if you don't know how to do above... here is a solution which MIGHT be useful... I am a bit worried about the menu width though - it may not be perfect.

Add the below CSS and check:


@media (max-width: 767px) {
.nav-primary {
    position: absolute;
    top: 20px;
    width: 84%
}
.header-image .site-header {
    margin-top: 45px;
}
}

Open in new window

0
 
Scott Fell, EE MVEDeveloperCommented:
You will find the theme files in /wp-content/{{your_theme_name}}  

If you have a child theme, best to make the changes there.  That way any updates will not be overwritten.

In your child theme, copy the theme page to the child theme location and from there you can move your div's.
0

Featured Post

Learn to develop an Android App

Want to increase your earning potential in 2018? Pad your resume with app building experience. Learn how with this hands-on course.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now