Menu Bar Css - Question | JoomShaper

Menu Bar Css

TM

Tom Mitchell

Template 4 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

0
11 Answers
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 4 years ago #21779

Hi, basic tip: https://www.joomshaper.com/blog/which-line-of-css-i-have-to-edit-code-inspector-in-action

Use custom CSS from template options or custom.css file - then put this code:

#sp-header { background-color: black; }

0
TM
Tom Mitchell
Accepted Answer
4 years ago #21828

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

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 4 years ago #21843

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)

0
TM
Tom Mitchell
Accepted Answer
4 years ago #21859

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.

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 4 years ago #21860

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?

0
TM
Tom Mitchell
Accepted Answer
4 years ago #21894

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.

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 4 years ago #21921

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.

0
TM
Tom Mitchell
Accepted Answer
4 years ago #22014

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.

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 4 years ago #22015

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

0
TM
Tom Mitchell
Accepted Answer
4 years ago #22343

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.

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 4 years ago #22503

This should help for desktop view:

@media (min-width: 1023px) {
.sp-page-builder .page-content #section-id-1624289627535 
{margin-top: -80px !important;}
}
0