Mobile Menu

cscreatives

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/

cscreatives

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?

Albert

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;;
 }
}

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

cscreatives

Tried that and it just caused the mobile menu to not show up all.

cscreatives

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?

Albert

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.

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

cscreatives

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?

Albert

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;
 }
}

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

cscreatives

Thanks. got it to work with a few modifications.

Albert

You're welcome

Learn more: Video Tutorials | How To | FAQ Vote on what comes next