Responsive menu is pushing down slideshow

HTML & CSS
1

http://justineuteneier.com

Hi all. I’m using the responsive menu from the folks at “Responsive Nav”. It’s pretty slick. Easy to install and customize.

The problem I’m having is that I use Revolution Slider and in the mobile state the responsive menu is pushing down the slider, not the page, just the slider.

I’ve tried Z-index but that didn’t work and I’m at a loss. I suspect it might be a position: fixed maybe but that affected the layout of the slider.

I also wanted to get any feedback about design, but perhaps I should post that in another forum? The site is mostly done but needs the finishing touches.

Many thanks,
Justin

2

Perhaps the question was too specific. I’m closer in that the slider no longer pushes down, but i have an overlay in the slider that part of my responsive menu hides behind. Again, tried Z-index but doesn’t seem to work.

Anyone?

3

Well not to have a conversation with myself, but position: relative seemed to fix it. Hopefully this helps someone else.

4

Hm, it seems to be working OK to me, except that the button won’t close the menu because it sits behind the heading. You can fix that by adding:

.nav-toggle {
position: relative;
z-index: 10;
}
5

Thanks Ralph. As usual, easier than I thought. Cheers. Does it work on your end now?

6

Does seem to work for me now. I’m not too keen on the margins on the button when the menu is open, though. It seems to hang down in no man’s land a bit. Perhaps at least reduce or remove the top margin.

7

Portfolio is 99% done. How do the margins look now?

My final issue is that the little nav button with three lines shows up fine when I resize my browser window but does not show up on an actual phone browser. I tested on both an iphone and android so I don’t think it’s a browser issue. Perhaps Jquery?

The funny thing is that if I click where I know the menu button is, it still drops down the menu, but it won’t retract.

thanks,
J

8

I like the website and the style too.

But, when I loaded it up it was kinda slow, almost felt like Flesh was loading up ;p

Try optimizing better, maybe see your score in Google Page Score?

or, just w3 total cache, and wp-minify, and smush it for pix

9

It’s showing for me on the mac iphone simulator which is 99% accurate.

It would be better if you did not let the button move when the menu was opened as I didn’t spot it had moved!


.nav-toggle{position:absolute;right:10px;top:0}
10

I just checked on my iPhone and the button indeed is not showing. Not obvious why, though.

11

Does it show in your simulator Ralph? Which ios is your iphone?

12

My simulator is dead and broken. It hasn’t worked for a few years, and I can’t be bothered downloading it again, since it’s broken on me twice now and I now have access to an iPhone and iPad. Sorry! But my phone is an iPhone4S, running iOS7.

13

Just checked in my wife’s iphone (ios6) and the button is showing the same as the iphone simulator (ios7) and working in the same way although it still needs the fix I mentioned above.

14

And I can confirm that the button shows for me now in iOS7 Safari. Perhaps the page hadn’t updated for me last time I tried it (I’ve been having a few problems getting mobile Safari’s cache to clear of late).

[ot]Paul, I just discovered that you can use desktop Safari’s web inspector to debug iPhone/iPad! Did you know that? I found out by chance. If the iPhone is plugged into the computer (via the USB cord), you just open Safari on the desktop and choose Develop > Username’s iPhone and the inspector opens and shows you the code under the hood on any page open in mobile Safari. Hovering over the code even highlights elements on the iPhone screen!

To set this up, you just have to do these things:

  • on the iPhone, go to Settings > Safari > Advanced > Web Inspector (that is, turn on this option)
  • open a web page in Safari on the iPhone
  • in desktop Safari, make sure the developer options are turned on. Safari > Preferences > Advanced > Show develop menu in menu bar

[/ot]

15

Thanks Ralph, I didn’t know that. I’ll just have to buy my own iphone to test it out as I usually borrow my wife’s iphone to test but she only lets it out of her sight for a few minutes :). I’m still using a phone from the stone age and has had £10 credit on it for the last three years.

16

Hey all. Thanks for the feedback. For some reason I’m not getting emails alerting me to new posts to this thread. Anyway, I’m glad it seems to be working.

Paul I’ll look into keeping the menu toggle fixed. I like that idea. If that all works is there a way to “mention” you or otherwise provide props? I’m new to these aspects of forum use.

cheers,
Justin

17

That CSS worked to keep it fixed up top. Thanks for that Paul.

18

Your thanks is praise enough :slight_smile:

19

Just noticed an issue. It looks fine when browser is resized but testing on an actual Samsung Galaxy Note II the hamburger icon is down below the header. The emulator is Chrome DevTools looks fine. Grrr…

20

It was the high resolution screen. The responsive nav had a media query for high res screens and it needed to go there as well. Nothing to see here, move along. :slight_smile: