[Resolved] Shortcode for Mobile Hamburger Menu

[Sars]

Thank you David,
I tried this altering your code as it did not work.

.no-sidebar .inside-article > *, .no-sidebar #comments, .no-sidebar .nav-links {
    max-width: 2000px;
    margin-left: auto;
    margin-right: -5px;
	 margin-top: -45px;
}

Still the right side is not coming as full width. Can you pls help.

Thank You

[David]

Remove this CSS as well:

#content {
    padding: 40px;
}

[Sars]

Thanks David!

Works perfectly well. But The icons does not look good on mobile. Can it be moved to Horizontal allignment on mobile and tab? Thank you

[Elvin]

Hi,

You can try adding this CSS so the icons display horizontally on mobile.

@media (max-width:768px){
/* change min-height and width */
#site-navigation {
    position: fixed;
    left: 0;
    min-height: auto;
    width: 100%;
    overflow: visible;
}
/* make it display in row*/
#site-navigation .main-nav > ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: row;
    min-height: auto;
}
/* Hide the duplicate search button */
#site-navigation .main-nav > ul > li.search-item {
    display: none;
}
}

Also, don’t forget to remove the inline CSS you’ve added on your icons. Keeping vertical-align:bottom; will ruin the alignment of the icons.

[Sars]

Thanks Elvin.

Also, don’t forget to remove the inline CSS you’ve added on your icons. Keeping vertical-align:bottom; will ruin the alignment of the icons.

How to hide all the icons for mobile then?

Thank you

[Elvin]

How to hide all the icons for mobile then?

Since they’re all li.menu-item we can simply do this to hide then on mobile.

@media (max-width:768px){
#site-navigation .main-nav > ul li.menu-item {
display: none;
}
}

[Sars]

Awesome,
Thanks a lot Elvin.

Have a great day!

[Elvin]

Nice one. You too. No problem. 🙂

[Author]

Posts