Mobile Menu

cscreatives · July 2015

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 · July 2015

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 · July 2015

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

cscreatives · July 2015

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

cscreatives · July 2015

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 · July 2015

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.

cscreatives · July 2015

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 · July 2015

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

cscreatives · July 2015

Thanks. got it to work with a few modifications.

Albert · July 2015

You're welcome

Mobile Menu

Comments