[Resolved] How to enable these in menu

[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

Thank you,
-Swadhin

GP Premium 1.7.8

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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

Thank you,
-Swadhin

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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

Thank you,
-Swadhin

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

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

Thank you,
-Swadhin

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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

Thank you,
-Swadhin

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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

Thank you,
-Swadhin

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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

Thank you,
-Swadhin

[David]

So this CSS:

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

becomes:

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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

Thank you,
-Swadhin

[Author]

Posts