Hamburger Menu Layout

CHRISRIEFENBERG

I have a questione regarding the hamburger menu which I have when using a smartphone. Is there a possibility that when you tap it that it expands horizontal and not vertical/accordion?

**This is the code I m using: **

/**

• Mobile Ham Menu Text Colors
  ***************************************************/
  .sm-user-ui .sm-accordion > .sm-accordion-item > .sm-accordion-item-label,
  .sm-user-ui .sm-accordion > .sm-accordion-item > a.sm-accordion-item-label:active,
  .sm-user-ui .sm-accordion > .sm-accordion-item > a.sm-accordion-item-label:visited,
  .sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-default .sm-accordion-item-label,
  .sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-default .sm-accordion-item-label:visited,
  .sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-default .sm-accordion-item-action,
  .sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-default .sm-accordion-item-action:visited,
  .sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-default .sm-page-widget-nav-menu-expand > a,
  .sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-default .sm-page-widget-nav-menu-expand > a:visited,
  .sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-default ul.vertical a,
  .sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-default ul.vertical a:visited,
  .sm-user-ui .sm-accordion > .sm-accordion-item > a.sm-accordion-item-label:hover,
  .sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-hover-color-default .sm-accordion-item-label:hover,
  .sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-hover-color-default .sm-accordion-item-action:hover,
  .sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-hover-color-default .sm-page-widget-nav-menu-expand > a:hover,
  .sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-hover-color-default ul.vertical a:hover,
  .sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-hover-color-default .sm-accordion-item-label:hover,
  .sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-hover-color-default .sm-accordion-item-action:hover,
  .sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-hover-color-default .sm-page-widget-nav-menu-expand > a:hover,
  .sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-hover-color-default ul.vertical a:hover {
  color: white;
  font-weight: 900;
  }

/**

• Font color size and style for galleries
  ***************************************************/
  .sm-user-ui .sm-gallery-cover .sm-gallery-cover-title {
  color: white;
  font-size: 30px;
  font-family: Raleway;
  }

Hikin' Mike

Try this:

.sm-user-ui .sm-accordion > .sm-accordion-item > .sm-accordion-children > .sm-accordion-item {
    display: inline;
    }       

CHRISRIEFENBERG

Hey Mike thanks a lot!

I have tried your command but it doesnt really work. Does it mean I have to remove some other lines from css code in order to make it work? Or do I just copy it at the end of the code?

Thanks and have a great Sunday!

Chris

Hikin' Mike

I just looked at your site using 'http://quirktools.com/screenfly/#u=http://www.chrisriefenberg.com&w=414&h=736&a=37&s=1' the code seems to work. The two subs (Motion and Lifestyle) now display horizontally and not vertical.

If you want the top menus (Sports, Landscape, Journeys, About, Contact) to display horizontally, you really need to re-think this. It won't fit on smaller devices.

CHRISRIEFENBERG

Hey Mike,

thanks for looking at it. Yeah i figured out that it worked too, but you are right it wont work out the way I wanted it and now I found a better work around to highlight the dropdown as well so it wont disappear in the white.

Thanks a lot for your support.

Chris