Make sliding top always visible or action bar visible

busterw · September 2019

With our theme, we're using the "Creative: Always Open" menu. Therefore, it will not allow the action bar to display which we wish it would as we need that area for adding a phone number. However, as a workaround, we're trying to using the sliding top which allows us to add a phone number and other items as needed. The problem is that we need that sliding top to be always visible. Is there something we can do in CSS or JS that would make it always visible? Or, is there a way to make the action bar show up with the menu type we've selected?

Bryan · September 2019

Hey,

in a recent update we changed it so now the information in the action bar show in the always open creative header. Please update the theme and go to theme options>menu & action bar>action bar.

Please let us know if this is enough or do you need assistance with the sliding top.

See screen:

https://prnt.sc/pao5wa

https://prnt.sc/pao5z8

There is also the banner area in theme options>header&subheader>extras that accepts simple text and HTML markup, it will also display in the crrative header.

thanks

busterw · September 2019

So the only way to show the action bar in the creative header is to be at the bottom of the menu? There's not a way to make it a true action bar across the top like with other menu themes? It appears as if the banner does the same thing, places below the menu.

If that's the case for both of those, I need to revisit the sliding top and ask if there's any way to make it always visible as those other 2 options simply won't work. Creative really should have a way to add a business phone above the menu so it's prominant at the top of the site. That's what I'm trying to accomplish with the action bar or sliding top.

Thanks!

Bryan · September 2019

You can try this custom CSS

#Sliding-top .widgets_wrapper {display:block !important;}
.sliding-top-control {display:none !important}

This makes it visible all the time and removed the arrow from the bottom.

busterw · September 2019

Bryan, while I thoughts this worked great as it served the intended purpose, on mobile, it causes the bar with the company logo and menu to be hidden behind the sliding top bar. I assume it is hiding behind it. Regardless, the top bar with logo and mobile menu is not visible on a mobile device. Do you have any thoughts on how to fix that?

Thanks!

Bryan · September 2019

You can use a media query to disable this effect on mobile, just use this css instead of the previous one:


@media (min-width:780px) {
#Sliding-top .widgets_wrapper {display:block !important;}
.sliding-top-control {display:none !important; }
 }

You can change the min-width value to set when this css does not apply. It will not display on the tablet as you already managed to see so you can make the min-width breakpoint a larger value so it shows the arrow.
thanks

busterw · September 2019

I still want it to be there on mobile. I just need it to appear below the header rather than covering it up. We're trying to use this to put a phone number via HTML at the top of the page since creative doesn't offer a way to do so above the menu.

Bryan · September 2019

Well, the CSS I have sent you will do that, please remove the old css and replace it with this one.

thanks

busterw · September 2019

I tried the latest and changed the min-width anywhere from 400 to 1400 and the logo and menu are still hidden.

Pablo · September 2019

Can you send us a link to your website?

We'll notice, why this CSS is not working in your case.

Thanks

busterw · September 2019

It is https://winnwoodretire.com.

Thanks!

Pablo · September 2019

Bryan asked you to remove previous (first css which Bryan sent you) CSS code - as Can I see, it's still there.

http://prntscr.com/pcvcf0

Thanks

busterw · September 2019

Sorry, I thought I had commented it out. I just commented it out and the menu and logo show but the sliding top is not always visible anymore. Now it must have the arrow clicked to show.

Pablo · October 2019

Please use this CSS code only:

@media (max-width:784px){
    #Top_bar{
        margin-top:119px !important;
    }
}


#Sliding-top .widgets_wrapper {display:block !important;}
.sliding-top-control {display:none !important; }

Thanks

busterw · October 2019

That does it. Thank you!

Make sliding top always visible or action bar visible

Comments