Mobile Menu

On my home page i am using the header below with no content below the header - is there css to make the mobile drop down menu "drop up" instead of down? unless you scroll after clicking on the mobile menu you will miss the menu options. Please advise.

http://bd1.cscreatives.com/bd1/

Comments

  • If the above is not possible, what would be the css to make the header move to the top on mobile devices so that the drop down menu is from the top and thereby visible without scrolling?
  • Hi,

    yes, this is possible but needs some modifications. Below css will do the trick:
    @media only screen and (max-width:767px){
     .home #Top_bar #menu {
      position: absolute !important; bottom: 130px !important; z-index: 9999 !important;;
     }
    }
  • Tried that and it just caused the mobile menu to not show up all.
  • Actually I figured it out ( i think) the position should be relative an the bottom margin higher.

    The next question i have is on the ipad size the mobile menu doesn't appear at all - it hasn't since i first started this project. what might that be?

  • The solution we gave you above is the only one that open menu up.

    About the iPad on what sizes it exactly does not work? Because as we see, you modified media size. Your size is 1100px while our was 767px.
  • yes, i got the ipad issue figured out by changing the size but now it is doing this weird thing where the brown background of the menu flashes then disappears on the ipad. Any thoughts?
  • So instead of 767px or your 1100px use 1239px as max-width. Also please add below css into this wrapper as well:
    #Top_bar #menu > ul {
        float: none !important;
    }
    So complete css should be:
    @media only screen and (max-width:767px){
     .home #Top_bar #menu {
      position: absolute !important; bottom: 130px !important; z-index: 9999 !important;;
     }
     #Top_bar #menu > ul {
        float: none !important;
     }
    }
  • Thanks. got it to work with a few modifications.
Sign In or Register to comment.