Menu bar css - Forum | JoomShaper
Staff replied Templates

Menu bar css

Asked by Tom Mitchell 5 years ago Last activity 5 years ago

Hi there,

I have template Resort installed. The one thing that is foxing me is how to change the background color of the Menu bar. There is a id=".has-slideshow#sp-top-bar in the template.css file. If I do not have a SP slider (which I do not - I use the Apliko equivalent) then the above id is not called and the menu bar is white. BUT, I want my menu bar to be black.

I just cannot see in the css file where the menu bar formatting is called where I would enter "background-color: #rgba(0,0,0,0.5);" Also, I want in increase the depth of the menu bar from 70px to 80px and center my text horizontally in the bar.

Thank you

Tom

11 replies

Oldest first Newest first Most helpful
Tom Mitchell Asked this
5 years ago

This does not replicate the behaviour of id=".has-slideshow#sp-top-bar where there is no slider; i.e. black with 20% transparency (so the image shows through) and then when you scroll down the page black with 50% transparency.

It simply gives a black menu bar which becomes white when you scroll down the page.

I know how to use the code inspector but it does not allow me to follow the logic that I have described.

Thanks

Tom

Paul Frankowski Senior Staff
5 years ago · edited

I gave you only inspiration,
any time you can set:

#sp-header { background-color: rgba(0,0,0,0.5); }

You can use rgba() color codes:

  1. the first 3 values are for rgb
  2. the 4th value is for the alpha channel and defines the opacity of the color

The alpha value can go from zero 0 (transparent) to one 1 (fully opaque)

Tom Mitchell Asked this
5 years ago

Yes, I already know how to do that. You have not answered the question. Inspection does not reveal the class/id of the sticky menu in order that I can apply the correct css to it. Nor does it reveal how to have an image (except when using your slider (which I do not want to use) behind the transparent menu.

Paul Frankowski Senior Staff
5 years ago · edited

Maybe easier would be just share URL.
Ones you talk about Resort from Joomshaper then about template from Apikko/Apliko? which we don't support!

But I wil try to guess...

.menu-fixed#sp-header {
    background-color: rgba(0,0,0,0.5)  !important;
    height: 80px;
}

"Inspection does not reveal the class/id of the sticky menu...."
In my opinion - it does. If you would scroll down you should see extra class is added "menu-fixed".

About Header height , in some templates it's preset in template styles as it's inside Resort.
And in that case custom CSS is needed. 

#sp-header {height: 80px;}
.sp-megamenu-parent > li > a,
.has-slideshow#sp-header .sp-megamenu-parent > li > a {line-height: 80px;}

I hope it's what you wanted?

Tom Mitchell Asked this
5 years ago

Link is enclosed. I am not using a template from Apliko. I am using your "Restort" template. What I am using is their slider module as it is much more flexible than Joomshaper's.

So my questions are about the css for Resort.

Paul Frankowski Senior Staff
5 years ago

I wish to help but all I see is ....

Fatal error: require_once(): Failed opening require...

but I gave you tips for Resort template anyway, have you tried them.

This template may not work with PHP 7.4, try older version.

Tom Mitchell Asked this
5 years ago

I had to take site down and rebuild. Back up now. I repeat everything I have said. The issue remains...

Link is enclosed. I am not using a template from Apliko. I am using your "Restort" template. What I am using is their slider module as it is much more flexible than Joomshaper's.

So my questions are about the css for Resort.

Your suggestion does not replicate the behaviour of id=".has-slideshow#sp-top-bar where there is no slider; i.e. black with 20% transparency (so the image shows through) and then when you scroll down the page black with 50% transparency. It simply gives a black menu bar which becomes white when you scroll down the page.

Paul Frankowski Senior Staff
5 years ago

....and instead of white header you want black with transparency?

Tom Mitchell Asked this
5 years ago

Might be best to start again so that we are all clear. In the Resort template using Joomshaper's slider, the menu appears to be black with a transparency of around 70% and you can see the image sitting behind it. If one doesn't use Joomshaper's slider, the menu bar appears as a solid colour and the image sits after (i.e. below) the menu bar.

I wish to achieve the same result using, let's just say an image, where the menu bar has a level of transparency that you can see through it to the image with the image effectively sitting behind the menu bar. I think that the remainder of the requirement has been resolved.

Thank you again for your help.

Log in to reply.