[Resolved] How to enable these in menu

Home Forums Support [Resolved] How to enable these in menu

Home Forums Support How to enable these in menu

Viewing 15 posts - 1 through 15 (of 24 total)
  • Author
    Posts
  • #857599
    Swadhin

    Hi there,

    I am trying to make my site a bit more mobile friendly and here are the options I am looking for.

    1) I tried this tutorial to add menu callouts but they do not work. Any idea why and tips to make it work?

    2) I am looking for a back button (leading to homepage) on the menu bar that appears on every page except the homepage (check image here and demo site here (on mobile))

    3) Also is it possible to include a separate mobile menu altogether (with the above options) than editing the existing menu?

    I currently use this code `.site-header {
    display: none;` (just letting you know in case it makes a difference).

    Cheers,
    -Swadhin

    GP Premium 1.7.8
    #857900
    David
    Staff
    Customer Support

    Hi there,

    1. Edit the Menu Item you wish to add the notifier to, and within the Navigation label text add the HTML provided after the actual label e.g.

    Menu Label<span class="menu-badge badge-bounce">NEW</span>

    2. You can add a link using the before_logo hook – something like this:

    <a class="logo-return hide-on-desktop" href="#"><!-- go home --></a>

    And some CSS to make it look like an ‘arrow’

    .logo-return {
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 10px 20px 10px 0;
        border-color: transparent #ffffff transparent transparent;
        margin-right: 10px;
        align-self: center;
    }

    3. Why not use the Slideout navigation? It can be set to Mobile only and have its very own menu.

    #857992
    Swadhin

    Hi David,

    Thanks so much. The first one worked.

    The second one did not work (I set a hook, the CSS but nothing shows) (I have edited the link to my staging site)

    Will a slideout navigation increase page load time? If not, is it possible to add a search widget inside that?

    -Swadhin

    #858001
    David
    Staff
    Customer Support

    Do you want this back arrow on all pages? As some are using the GP header and others are not.

    Slideout nav won’t effect load time, it uses a minimal amount of JS and CSS. It also has its own Widget Area when its activated.

    #858025
    Swadhin

    Hi David,

    I would like to activate this back arrow on all pages.

    It also has its own Widget Area when its activated.

    I did not understand it. Can you point me to a resource that helps me to understand its true potential?

    Update: I got this resource: https://docs.generatepress.com/article/activating-slide-out-navigation/ Thank you πŸ™‚

    Thanks,
    -Swadhin

    #858141
    David
    Staff
    Customer Support

    Use the inside_mobile_header hook instead. I have also updated the CSS here:

    https://generatepress.com/forums/topic/how-to-enable-these-in-menu/#post-857900

    For the static pages the header is built with the pagebuilder – so you would need to add something similar to the above in that editor as its not controlled by the theme.

    Info on Slideout:

    https://docs.generatepress.com/article/activating-slide-out-navigation/

    The widget area is within the slideout itself. It doesn’t replace the mobile header, it just opens when you click the hamburger icon instead.

    #858408
    Swadhin

    Hi David,

    This solved the appearance issue but it has a weird placement https://imgur.com/a/4FCjTbN plus the menu button move to a new line. How to solve this? Is there a way to add an image icon like this so that it looks good and aligns well too?

    I tried it and used this code
    <a class="logo-return hide-on-desktop" href="https://www/digitalgyd.com/"><img src="https://www.staging.digitalgyd.com/wp-content/uploads/2019/04/back-home.png"><!-- go home --></a>

    The custom CSS you provided added the CSS arrow (with same dis-allignment) while it was there and when I removed it it had no effect.

    #858417
    David
    Staff
    Customer Support

    As you’re using FontAwesome you could use use this HTML

    <a href="#" class="logo-return"><i class="fa fa-caret-left" aria-hidden="true"></i></a>

    And this CSS instead:

    .logo-return {
        font-size: 36px;
        color: #fff;
        margin: 3px;
    }
    #mobile-header>.inside-navigation {
        align-items: center;
    }
    #858983
    Swadhin

    Hi David,

    The icon appears but is very small on the screen to be viewed. check here https://imgur.com/a/P3K9EXJ. It looked the same even if I increased the icon size.

    So I went back to the image format. It worked nice but the thing is the hamburger menu comes to a second line on mobile. I changed the logo size from 459*100 to 150*57 but it still had the same two line effect. Check here https://imgur.com/a/PmYFRYy

    Now, let’s do one thing, help me align them all in one menu line. That will do.

    P.S. I never knew I had fontawesome enabled. How did you know it and how do I disable it?

    Best regards,
    -Swadhin

    #859261
    David
    Staff
    Customer Support

    Would it be simpler to just include the back arrow within your mobile header logo? Just a thought.

    I can see the FA font being loaded in the developer tools. GP doesn’t install FA icons – unless you still have the essential icons checked in Customizer > General.

    If its not that then its being added by one of your other plugins and may be required if it is displaying icons.

    #859300
    Swadhin

    Hi David,

    Lol I too had a thought like that for a while but again I think that would be weird. So we now have two options:

    1) Reverse engineer how this site implemented it and so we could implement it or at least replicate it someway (he uses an image, though).

    2) Go with your suggested font awesome icon option (which I think is possibly loaded via Thrive Architect) but make the icon a bit bigger (I tried font size 100px but don’t know why it doesn’t change).

    Best regards,
    -Swadhin

    #859311
    David
    Staff
    Customer Support

    Haha πŸ™‚

    So if you’re keeping the FA icons for Thrive then we can use option 2. If you want to add back the code to display it i can take a look and see how we make it look great.

    #859314
    Swadhin

    Yes, I have added the code back up. Now let’s make it look a bit bigger or clickable size at least. πŸ™‚

    Thanks so much David.

    Best regards,
    -Swadhin

    #859322
    David
    Staff
    Customer Support

    So this CSS:

    .logo-return {
        font-size: 72px !important;
        color: #fff;
        margin: 3px;
    }

    becomes:

    .logo-return i {
        font-size: 72px;
        color: #fff;
        margin: 3px;
    }
    #859549
    Swadhin

    Hi David,

    Thanks so much. It worked so wonderfully… I am totally loving the experience with GeneratePress.

    Thanks again!

    Update: David, the same old “menu jumps to second line” issue persists. How do we solve it?

    Best regards,
    -Swadhin

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