SPLIT MENU on Tablets & Handheld Devices

ryanhamilton

Hello,

I've gotten the site pretty close to how it should be on desktop views so now I am working through other devices and checking how it looks & operates.

my site is www.get-fed.com

When viewing on a tablet the menu seems to be off center and has a gap between the bottom of the top bar and top of the menu.

Also the left & right menu sections seem to be taking on the desktop alignments rather then all menu items being centered in the middle.

Thanks for the help.

/R

Albert

Hey,

there is nothing what could be done in this case because you used large logo which is over the header. If we'll move menu up, menu will cover the logo.

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

ryanhamilton

Ok fair enough about the vertical placement but that was only a portion of my question. What about it not being centered on the screen and the text also not being centered in the box? How do we fix that?

Albert

Sorry for that but we missed that part of question. We have checked your website once again and as we see, menu stars from top on mobile now and menu items are centered. So what exactly you want to do know with them? In case, this is what we see now http://pasteboard.co/2JhO8rFo.png

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

ryanhamilton

I think I figured something out. Not sure if it is the proper fix, but it seems to work.

Turns out I had  45% !important; applied to my menu left in the regular CSS so it was forcing that width in the handheld device resolutions. I took out the !important in descktop CSS and then placed the following code under the responsive CSS for tablets portrait & landscape resolutions & mobile tall & wide.

#Top_bar #menu {

width: 100%;

bottom: auto;

top: 90% !important;

height:1000% !important; /* This just made my menu really long so it looks like it covers the whole page*/

right: 1px;

position: absolute;

margin: 0px;

background: rgba(150,130,100,0.9) !important;}

.header-split #Header .top_bar_left .menu_left {

  text-align: center !important;

  width: 100%!important;

}

Hope this helps others in need.

Cheers.

/R