Solved

reposition hamburger icon to top of screen

Posted on 2016-10-28
5
60 Views
Last Modified: 2016-11-02
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
Comment
Question by:nsitedesigns
  • 2
  • 2
5 Comments
 

Author Comment

by:nsitedesigns
ID: 41864503
I tried putting the following code in but it didn't help
position: absolute;
top: 0;

Open in new window

0
 
LVL 52

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 250 total points
ID: 41864545
I think you want to move  your div.responsive-menu-icon physically to where you want it in your code
0
 

Author Comment

by:nsitedesigns
ID: 41864566
I don't think i can do that with wordpress.
0
 
LVL 9

Accepted Solution

by:
Prasadh Baapaat earned 250 total points
ID: 41865777
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
 
LVL 52

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 250 total points
ID: 41867402
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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I've been asked to discuss some of the UX activities that I'm using with my team. Here I will share some details about how we approach UX projects.
This article discusses four methods for overlaying images in a container on a web page
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

910 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now