adjusting the main menu on mobile device

• 

  thalisha89 · Member · May 3, 2017 at 1:04 pm

  • Copy link
  • Add topic to favorites

  Hi,

  When i view my blog on my mobile phone, my menu is a bottun menu
  i would like my menu to be in text (just like it is when i view it on a dekstop) so u can click on the pages in stead of first clicking on the menu bottun and then select a page.

  my blog is thalisha.com

  thank you

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · May 5, 2017 at 3:18 am

  • Copy link

  Hi there, add the following to your custom CSS. If you plan on having submenus at some point, I would suggest not forcing the full menu on touch devices such as tablets and phones, since they will have problems with them. That is one of the reasons that the majority of sites use the touch menu with the toggle button.

  If however, you do not plan on using submenus, this will work on touch devices.

  @media screen and (max-width: 800px) {
  	.top-navigation .main-navigation {
  		display: inline-block;
  		border-top: solid 2px #e1e1e1 !important;
  		border-bottom: solid 1px #e1e1e1 !important;
  	}
  	.top-navigation-right {
  		display: none;
  	}
  	.site-identity {
  		padding-bottom: 0;
  	}
  }

• 

  thalisha89 · Member · May 5, 2017 at 6:57 am

  • Copy link

  it works. but it doesn’t look pretty because it’s not on 1line. but thanks very much!

• 

  thesacredpath · Member · May 5, 2017 at 7:35 am

  • Copy link

  You are welcome, and yeah, there isn’t much we can do about the two lines on the menu, On smaller screens, there simply isn’t enough width, and we have to keep the spacing such that people can tap on the menu items. This is another reason that on smaller screens the menu changes to behind the button.