SitePoint Sponsor

User Tag List

Results 1 to 20 of 20
  1. #1
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Responsive menu is pushing down slideshow

    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. #2
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #3
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well not to have a conversation with myself, but position: relative seemed to fix it. Hopefully this helps someone else.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,217
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    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:

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

  5. #5
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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:

    Code:
    .nav-toggle {
    position: relative;
    z-index: 10;
    }
    Thanks Ralph. As usual, easier than I thought. Cheers. Does it work on your end now?

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,217
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    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. #7
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #8
    SitePoint Member
    Join Date
    Jan 2014
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by justinae View Post
    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.
    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!

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

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,217
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    I just checked on my iPhone and the button indeed is not showing. Not obvious why, though.

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ralph.m View Post
    I just checked on my iPhone and the button indeed is not showing. Not obvious why, though.
    Does it show in your simulator Ralph? Which ios is your iphone?

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,217
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Does it show in your simulator Ralph? Which ios is your iphone?
    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. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    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. #14
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,217
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    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).

    Off Topic:

    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


  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ralph.m View Post

    Off Topic:

    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

    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. #16
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #17
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That CSS worked to keep it fixed up top. Thanks for that Paul.

  18. #18
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by justinae View Post
    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
    Your thanks is praise enough

  19. #19
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #20
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •