Turn "Hamburger" Mobile Menu off

(The icons I produced as fa icons in the menu as described here: https://docs.generatepress.com/article/adding-icons-to-menu-items/#floating-the-icon-to-the-right.

The hamburger menu I am using is TapTap.)

Hi there,

Hmm that code should still work.

How did you add it?

If you disable TapTap, does it work?

Yes, I tried that. Added the code snippet and the css.

The icons in the primary menu still switch to mobile toggle.

I don't know what else I could be doing wrong. I need to reactivate TapTap menu, since it's a live site. :)

I tried a header widget for the social links, but that seems to disappear as well on mobile?

Hmm there shouldn't be any CSS needed.

Just tested the code and it worked for me still.

Hard to tell what the problem is if you can't disable TapTap.

Do you have a test server you can try?

Deactivated! :)

Can you double check that the snippet is activated and not just saved?

I have run snippet everywhere checked.

Hi Richard, you can use the Header Widget for the social icons. However you will need to switch of the Mobile Header under Layout > Header for it to display on mobile.

Hi David,

I did that. It disappeared in Mobile view.

Basically, we need a header that changes color and logo in sticky mode, and the social icons stay put. We got this for the most part, except the hamburger keeps coming back. :) we haven’t gotten to the logo bit.

Thanks!

Hi!

We are still having problems with this.

The sticky header is showing the hamburger in mobile view. We want this turned off, and the items of this menu to appear in the header instead (they are only icons).

This is our Additional CSS currently:

/*
You can add your own CSS here.

Click the help icon above to learn more.
*/

html, body {
max-width: 100% !important;
overflow-x: hidden !important;
}

.site-info a:hover {
text-decoration: underline;
text-align: left !important
}

.site-info {

text-align: left !important;
padding-left: 50px
}

.taptap-by-bonfire ul li a {
line-height: 84px;
font-weight: 300;
}

.entry-meta a, .entry-meta a:visited, .entry-meta {
display: none;
}

.sticky-enabled .main-navigation.is_stuck {
background: #95a6ff;
box-shadow: 0 2px 2px -2px rgba(0,0,0,.2);
}

.sticky-enabled .main-navigation.is_stuck.main-navigation .main-nav ul li a, .menu-toggle {
color: #020202
}

.sticky-enabled .main-navigation.is_stuck.main-navigation .main-nav ul li a:hover, .menu-toggle {
color: #fff
}

.site-logo {
margin-left: 240px
}

/* Landscape tablet and below */
@media (max-width: 1024px) {
.inside-footer-widgets > div {
margin-bottom: 50px;
}

.active-footer-widgets-1 .footer-widget-1,
.active-footer-widgets-3 .footer-widget-3,
.active-footer-widgets-5 .footer-widget-5 {
width: 100%;
}
}

/* Portrait tablet and below */
@media (max-width: 768px) {
.sidebar,
.content-area {
float: none;
width: 100%;
}

.site-main {
margin-left: 0 !important;
margin-right: 0 !important;
margin-bottom: 0 !important;
}
.fluid-header .inside-header {
text-align: center;
}

.header-widget {
float: none;
max-width: 100%;
text-align: center;
}

.navigation-search,
.navigation-search input {
width: 100%;
max-width: 100%;
}

.main-navigation li.search-item {
z-index: 19;
}

.main-navigation li.search-item .fa-times {
text-indent: -9999px;
}
.alignleft,
.alignright {
float: none;
display: block;
margin-left: 0;
margin-right: 0;
}
.main-navigation li.search-item.current-menu-item {
position: relative !important;
right: auto;
}

.post-image-aligned-left .post-image,
.post-image-aligned-right .post-image {
float: none;
margin: 2em 0;
text-align: center;
}

.site-info {
padding-left: 10px;
padding-right: 10px;
}
}

Thanks!

Best,
Richard

Hi Richard,

i think we need a fresh start maybe. I am thinking you ditch the menu containing the social icons. We create a blank menu and assign this to the primary navigation. Disable the mobile header. And we hook the social icons into the navigation like so:

add_action( 'generate_inside_navigation','db_inside_navigation_html' );

function db_inside_navigation_html() { ?>
    <div class="social-icon-wrap">
        <span class="social-icons">
            <a target="_blank" href="mailto:hello@christopherwaldner.com"><i class="fa fa-envelope"></i>D</a>
            <a target="_blank" href="https://www.linkedin.com/in/christopherwaldner/"><i class="fa fa-linkedin"></i>A</a>
            <a target="_blank" href="https://www.xing.com/profile/Christopher_Waldner/cv"><i class="fa fa-xing"></i>B</a>
            <a target="_blank" href="https://www.slideshare.net/christopherwaldner1"><i class="fa fa-slideshare"></i>C</a>
        </span>
    </div>
<?php 
}

Then we can target the social icon span and inline them and hide the mobile toggle:

.social-icon-wrap .social-icons a {
    display: inline;
}
.menu-toggle {
	display: none !important;
}

then its just a case of adjusting for the site logo.

Any good?

Hi David,

thanks for your reply.

Is there anything we can delete then from the current CSS?

And the function php in Code Snippets?

I'll check this tomorrow.

Thanks!
Richard

Probably anything with the menu-toggle and the header-widget as we won't need them. Of course worth just commenting them out.

Yep you can use Code Snippets for that!