[Support request] floating button like sticky nav, with no menu

[Jeffrey]

I am looking to create a button that acts like the sticky navigation, but without the menus.

I included a site example

[Leo]

Hi there,

You could consider a solution similar to this one:

[Jeffrey]

Thats nice, but I am looking to have the exact behavior of the sticky menu navigation.

Is there a way to hide the menu and logo on the sticky dropdown for certain pages? (and possibly make the background transparent) Therefore only showing the button on certain pages/posts?

[Ying]

Is there a way to hide the menu and logo on the sticky dropdown for certain pages?

Yes, that’s possible with custom CSS.

Can you enable sticky navigation and link us to your site?

[Jeffrey]

Ok, its enabled.

I currently have the color as (empty) transparent, would it be possible to just make it transparent by CSS also on the same pages.

This why I could still style the nav for other areas.

Also there is a feint (really light) line at the bottom of the sticky nav, could that be made transparent too?

[Ying]

would it be possible to just make it transparent by CSS also on the same pages.

Yes, it’s possible with CSS. You can set the colors in customizer now for pages don’t need the floating button.

I’m not seeing a sticky navigation on desktop, do you only want it on mobile?

Let me know 🙂

[Jeffrey]

It says its on for both?

[Ying]

Hum.. I can see it’s been activated in customizer, but something is preventing the JS to load on desktop.

Can you try disable all your plugins except GP premium to eliminate conflicts from other plugins?

And if you are using a child theme, switch to the parent theme to test.

Let me know.

[Jeffrey]

I was making some changes. Please look again

[Ying]

Try this:

.page-id-29 #sticky-navigation .navigation-branding, #sticky-navigation .main-nav {
    display: none;
}

.page-id-29 #sticky-navigation {
    background-color: transparent;
    box-shadow: none;
}

.page-id-29 nav#sticky-navigation > .inside-navigation {
    justify-content: flex-end;
}

.page-id-29 #sticky-navigation .gb-button-wrapper {
    margin-top: 10px;
}

[Jeffrey]

Perfect! Thank you 🙂

Now how can I choose what pages to disable the sticky menu on.

I tried:

#sticky-navigation {
    display: none;
}

but it didn’t work.

Is this possible? Like to choose which pages I want to use the sticky menu on, and which pages I don’t?

[Jeffrey]

wait figured it out 🙂

[Ying]

The .page-id-29 is targeting the page you linked, so the CSS will only work on that page.

If you want to target other page, for example the Pricing page, it’s .page-id-40 which can be found in its body tag:https://www.screencast.com/t/DpfJk8psa

You can open the developer tool by pressing F12.

So if you want to target the homepage and the pricing page, add .page-id-40 to every CSS. eg:

.page-id-29 #sticky-navigation .navigation-branding, #sticky-navigation .main-nav {
    display: none;
}

to:

.page-id-29 #sticky-navigation .navigation-branding, #sticky-navigation .main-nav, .page-id-40 #sticky-navigation .navigation-branding, #sticky-navigation .main-nav {
    display: none;
}

[Jeffrey]

Interesting.

Is there a way to have it disappear when getting to the footer?

As in the sticky only displays up until the footer area starts?

[Ying]

Is there a way to have it disappear when getting to the footer?

I don’t think there’s an easy way to achieve this, custom development is required to write your own JavaScript.

Unless you are willing to give up the transition effect, then we can use CSS to achieve this.

[Author]

Posts