Shortcode for Mobile Hamburger Menu

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

Remove this CSS as well:

#content {
    padding: 40px;
}

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

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.

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

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;
}
}

Awesome,
Thanks a lot Elvin.

Have a great day!

Nice one. You too. No problem. :)