dynamic one line menu

• 

  blainjoanna · Member · Dec 20, 2016 at 11:29 am

  • Copy link
  • Add topic to favorites

  good morning

  I use KARUNA for my website.
  I would like to have all the items/categories of the horizontal menu (at the top): on ONE line only (not 2), for all devices (the best) or at least for computers & tablets (default). It implies the text of the menu categories can adjust by moving to the left or/and by size decreasing in order to remain on ONE LINE.
  Can someone help me please????? thanks a lot for your help…

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

• 

  thesacredpath · Member · Dec 20, 2016 at 8:24 pm

  • Copy link

  Hi there,

  would like to have all the items/categories of the horizontal menu (at the top): on ONE line only (not 2), for all devices (the best) or at least for computers & tablets (default).

  The menu changes to the touch device menu (icon) for tablets and smaller devices as the standard menu does not work well on them, and on smaller screens would probably be 3 or 4 lines since shrinking it to be on one line would mean making the menu items too small for someone’s finger to tap on.

  The following is one possible solution for the menu and header area to keep the menu on one line for 768px and wider screens/windows. Add it to your custom CSS and see what you think.

  @media screen and (min-width: 768px) {
  	.main-navigation a {
  		padding-left: 1.6em;
  	}
  	.site-branding {
  		display: block;
  		width: 100%;
  		margin-right: 0;
  		text-align: center;
  	}
  	.main-navigation {
  		width: 100%;
  	}
  	.site-branding-wrapper {
  		display: block;
  	}
  }

  This centers your logo and title and centers the menu below that. There isn’t enough room with the two of them side-by-side to keep the menu one line.

• 

  blainjoanna · Member · Dec 22, 2016 at 10:12 am

  • Copy link

  thanks a lot… you are wonderfull, really.
  I love this solution…

  Again thanks.

  Merry Christmas and happy new year!

• 

  thesacredpath · Member · Dec 22, 2016 at 7:59 pm

  • Copy link

  Awesome, and you are welcome!