[Resolved] Turn "Hamburger" Mobile Menu off

Home Forums Support [Resolved] Turn "Hamburger" Mobile Menu off

Home Forums Support Turn "Hamburger" Mobile Menu off

Viewing 15 posts - 1 through 15 (of 34 total)
  • Author
    Posts
  • #602460
    Richard

    Hi!

    I’d like for the social icons to stay responsive (in place as is) with no hamburger menu. Is this possible?

    I tried this, but it didn’t work:
    https://generatepress.com/forums/topic/possible-to-not-turn-nav-bar-into-a-button-on-mobile/#post-120858

    Thank you!

    Best,
    Richard

    GeneratePress 2.1.2
    GP Premium 1.6.2
    #602463
    Richard

    (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.)

    #602857
    Leo
    Staff
    Customer Support

    Hi there,

    Hmm that code should still work.

    How did you add it?

    If you disable TapTap, does it work?

    #603040
    Richard

    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. 🙂

    #603041
    Richard

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

    #603179
    Leo
    Staff
    Customer Support

    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?

    #603183
    Richard

    Deactivated! 🙂

    #603184
    Leo
    Staff
    Customer Support

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

    #603185
    Richard

    I have run snippet everywhere checked.

    #603480
    David
    Staff
    Customer Support

    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.

    #603559
    Richard

    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!

    #619562
    Richard

    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

    #619659
    David
    Staff
    Customer Support

    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?

    #619677
    Richard

    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

    #619681
    David
    Staff
    Customer Support

    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!

Viewing 15 posts - 1 through 15 (of 34 total)
  • You must be logged in to reply to this topic.