Icon drop down menu om desktop

Is it possible to get the same type of dropdown menu as in responsive mode on Desktop aswell?

Some are using icons in the menu, (like for example social media icons). I´m using a plugin to do this. And it would be great to have the menu button besides that. Or just the meny button.

Great stuff Moesia Pro, i love it. It´s easy to use, scalable and offers everything desired, or is it? :slight_smile:

Have a nice weekend.

BR
Henrik

My own site: http://boe.im/

Dear Henrik,

In order to achieve that objective, could you please try to apply the following CSS code through the Simple Custom CSS plugin or child theme’s style.css?

.menu-toggle,
.main-navigation.toggled ul{
    display: block;
}

.main-navigation ul {
    display: none;
}

Let me know how it goes.

Regards,
Kharis

Hey again. It works but appears on a row from left to right below. I would like it to be displayed in a drop down list. Possible?

This is great to though, someone might need this :slight_smile:

BR
Henrik

Dear Henrik,

Try to change the CSS code I previously suggested with the following:

.menu-toggle,
.main-navigation.toggled ul{
    display: block;
}

.main-navigation ul {
    display: none;
    width: 100%;
}

.main-navigation{
    padding-right: 0;
    width: 100% !important;
}

.main-navigation li{
    width: 100%;
    display: block;
    padding: 5px 0 !important;
    text-align: center;
}

.main-navigation li a{
    display: block;
    float: none;
}    

Let me know how it goes.

Regards,
Kharis

Just perfect! Thanks

Hey again.

I´ve encountered a small problem with the above.

On an iPhone 6s the Toggled menu appears centered below the logo in portrait view? It doesn´t on my Android, (5" screen) or any other smartphones i have been able to test it on.

In Landscape mode it´s working fine on the iPhone as well.

Is there any quick fixes to keep the toggled menu up and to the right?

Br
Henrik

Dear Henrik,

Try to apply the following CSS code:

@media only screen and (max-width:767px){

  .header-wrap .container{
    text-align: left;
  }

  .header-wrap .btn-menu{
    float: right;
    margin-right: 15px;
    margin-top: -50px;
  }  
  
}

Let me know how it goes.

Regards,
Kharis