[Antonio Crutchley]

How do I change the desktop menu from hamburger to horizontal but keep the hamburger for mobile?

[minal]

Hello @antonio:

We have an option for customizing menus.

Go to Dashboard > Appearance > Customizer >Theme Options > Menu Option. You will get the option for change the menu type.

Kindly see the screenshot if you get stuck.

I hope it works for you

Sincerely,

Minal

[Antonio Crutchley]

Hello @minal – thanks for your solution. It works excellent for screens 1200px wide and greater. Anything under 1200px and it returns to hamburger.

[sujeet]

Hello @Antonio,

Currently there is no option to switch screen size but you can achieve by adding the following custom CSS on your system.

To add CSS kindly go to Dashboard > Appearance > Customizer > Additional CSS and paste the given CSS

@media only screen and (min-width: 64em) {
.navigation-classic .main-navigation ul ul a {
  padding: 7px 20px;
  width: 262px;
}

.navigation-classic.menu-align-left .site-header-menu,
.navigation-classic.header-right-enabled .site-header-menu {
  -webkit-box-flex: 1;
  -ms-flex: auto;
  flex: auto;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.navigation-classic.menu-align-left #primary-menu-wrapper,
.navigation-classic.header-right-enabled #primary-menu-wrapper {
  margin-right: auto;
}

.navigation-classic .dropdown-toggle,
.navigation-classic .main-navigation ul .dropdown-toggle.toggled-on,
.navigation-classic #primary-menu-wrapper .menu-toggle-wrapper {
  display: none;
}

.navigation-classic .main-navigation li {
  display: inline-block;
}

.navigation-classic #primary-menu-wrapper .menu-inside-wrapper {
  max-width: 100%;
}

.navigation-classic .main-navigation a {
  padding: 14px 20px;
  line-height: 2;
}

.navigation-classic.menu-align-left .site-header-main .site-branding,
.navigation-classic.header-right-enabled .site-header-main .site-branding {
  margin-right: unset;
  padding-right: 42px;
}

.navigation-classic #primary-menu-wrapper .menu-inside-wrapper {
  border: none;
  position: relative;
  display: block;
  float: left;
  top: 0;
  left: 0;
  right: 0;
  visibility: visible;
  opacity: 1;
  width: auto;
  bottom: auto;
  background-color: transparent;
  box-shadow: none;
  overflow: inherit
}

.navigation-classic .site-header-menu .main-navigation {
  padding: 0;
}

.navigation-classic.absolute-header .site-header-menu .main-navigation a,
.navigation-classic.absolute-header .dropdown-toggle {
  color: #ffffff;
}

.navigation-classic.absolute-header .site-header-menu .main-navigation a:hover,
.navigation-classic.absolute-header .site-header-menu .main-navigation a:focus,
.navigation-classic.absolute-header .site-header-menu .main-navigation .current_page_item>a,
.navigation-classic.absolute-header .site-header-menu .main-navigation .current-menu-item>a {
  color: #CCCCE4;
}

.navigation-classic .main-navigation .sub-menu,
.navigation-classic .main-navigation .children {
  background-color: #fafafa;
}

.navigation-classic .main-navigation ul ul {
  display: block;
  float: left;
  margin: 0;
  padding: 7px 0;
  position: absolute;
  top: 100%;
  left: -999em;
  z-index: 99999;
}

.navigation-classic .main-navigation .menu-item-has-children>a:after,
.navigation-classic .main-navigation .page_item_has_children>a:after {
  content: "\f107";
  font-size: 16px;
  font-size: 1rem;
  padding-left: 7px;
}

.navigation-classic .main-navigation ul li:hover>ul,
.navigation-classic .main-navigation ul li.focus>ul {
  left: auto;
  right: 0;
  -webkit-box-shadow: 0 0 5px -3px #000;
  -moz-box-shadow: 0 0 5px -3px #000;
  box-shadow: 0 0 5px -3px #000;
  -webkit-animation: smoothScrollBack 0.5s forwards, fadein 0.5s;
  -moz-animation: smoothScrollBack 0.5s forwards, fadein 0.5s;
  -o-animation: smoothScrollBack 0.5s forwards, fadein 0.5s;
  animation: smoothScrollBack 0.5s forwards, fadein 0.5s;
}

.navigation-classic .main-navigation .menu>.current-menu-item>a:before,
.navigation-classic .main-navigation .menu>.current-menu-ancestor>a:before {
  content: "";
  border-bottom: 2px solid;
  position: absolute;
  left: 20px;
  bottom: 0;
  width: calc(100% - 40px);
  height: 1px;
}

.navigation-classic.menu-align-left .main-navigation ul li:hover>ul,
.navigation-classic.menu-align-left .main-navigation ul li.focus>ul {
  left: 0;
  right: auto;
}

.navigation-classic.absolute-header .site-header-menu .main-navigation ul ul a {
  color: #000000;
}

.navigation-classic.absolute-header .site-header-menu .main-navigation ul ul a:hover,
.navigation-classic.absolute-header .site-header-menu .main-navigation ul ul a:focus,
.absolute-header:not(.header-top-with-bg) .top-navigation ul ul a:hover,
.absolute-header:not(.header-top-with-bg) .top-navigation ul ul a:focus,
.navigation-classic.absolute-header .site-header-menu .main-navigation ul ul .current_page_item>a,
.navigation-classic.absolute-header .site-header-menu .main-navigation ul ul .current-page-ancestor>a,
.navigation-classic.absolute-header .site-header-menu .main-navigation ul ul .current-menu-item>a,
.navigation-classic.absolute-header .site-header-menu .main-navigation ul ul .current-menu-ancestor>a,
.absolute-header:not(.header-top-with-bg) .top-navigation ul ul .current_page_item>a,
.absolute-header:not(.header-top-with-bg) .top-navigation ul ul .current-page-ancestor>a,
.absolute-header:not(.header-top-with-bg) .top-navigation ul ul .current-menu-item>a,
.absolute-header:not(.header-top-with-bg) .top-navigation ul ul .current-menu-ancestor>a {
  color: #666666;
}
}

I hope it works for you, If not please add queries.

Regards,
Sujeet

[Antonio Crutchley]

Hello @sujeet – this is a lot of codes without any explanation. I copied it all and added it to my custom CSS, but it didn’t do anything.

This is how I solve the problem:
<div>/*** Hide hamburger menu on screen width 480px and above ****/</div>
<div>@media only screen and (min-width: 30em) {</div>
<div>    .menu-toggle {</div>
<div>        padding: 20px 10px;</div>
<div>        visibility: hidden;</div>
<div>  position: absolute;</div>
<div>    }</div>
<div>}</div>
<div></div>
<div>/*** Display horizontal menu on screen width 480px and above ****/</div>
<div>@media only screen and (min-width: 30em) {</div>
<div>.main-navigation ul, .top-navigation ul, .secondary-navigation ul,  .navigation-classic .main-navigation a, .site-secondary-header-menu .secondary-navigation a {</div>
<div>   Display: flex;</div>
<div>padding: 0 14px;</div>
<div>}</div>
<div>}</div>
<div></div>
<div>/*** Set menu padding and line-height on screen width 480px and above ****/</div>
<div>@media only screen and (min-width: 30em) {</div>
<div>.navigation-classic .main-navigation a, .site-secondary-header-menu .secondary-navigation a {</div>
<div>        padding: 14px 14px;</div>
<div>        line-height: 1;</div>
<div>}</div>
<div>}</div>
<div></div>
<div>/*** Set menu active border color on screen width 480px and above ****/</div>
<div>@media only screen and (min-width: 30em) {</div>
<div>    .navigation-classic .main-navigation .menu > .current-menu-item > a:before, .navigation-classic .main-navigation .menu > .current-menu-ancestor > a:before {</div>
<div>        content: “”;</div>
<div>        border-bottom: 2px solid;</div>
<div>        position: absolute;</div>
<div>        left: 20px;</div>
<div>        bottom: 0;</div>
<div>        width: calc(100% – 40px);</div>
<div>        height: 1px;</div>
<div>  border-bottom-color: #fc7993;</div>
<div>    }</div>
<div>}</div>
<div></div>
<div>/*** Remove top padding from header menu and increase bottom padding ****/</div>
<div>.site-header-menu .main-navigation, .top-navigation, .secondary-navigation {</div>
<div>    /* padding: 14px 0; */</div>
<div>  padding-top: 0 !important;</div>
<div>    padding-bottom: 16px !important;</div>
<div>}</div>
<div></div>
<div>I hope you didn’t spend much time writing all those codes. Either way, thanks for responding!</div>
<div></div>

[Sakin]

Hello Antonio,

Looks like you copy the DIV HTML code as well. You can find the raw CSS at https://gist.githubusercontent.com/sakinshrestha/2a8ef03ad182e5fefb4a4bbf2c176c08/raw/cff5b5f37dd1cd4010d67d6eac246c316e26b52a/style.css

Copy the code from this link and add it to the “Appearance => Customize => Additional CSS” box. This code is the code for the Desktop menu for 1024px and above.

Regards,
Sakin

[Author]

Posts