Support Forums

Support Offline : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

Sticky menu background colour

Featured Lock Resolved Task
He, I'd like to change the colour of the sticky menu. The main site colour is green, but I want the menu black, with white text.

How do I overwrite the template presets and set the background colour and also the menu text colour?

Ive created custom.css - what are the classes I need pls.

Thanks,
Ben.

1 Answers

Pavel

More than a month ago #Permalink
You can find it using the browser code inspector.
http://dl4.joxi.net/drive/2018/10/17/0008/0401/545169/69/c21991da7c.png
Then you can write the code directly in the code inspector to find the right value and see how it looks.
http://dl3.joxi.net/drive/2018/10/17/0008/0401/545169/69/2def632c41.png
After you have configured everything, you can copy this code and paste it into custom.css.

#sp-logo-wrapper {
background: #000;
}

Note that after scrolling the class of the section containing the menu changes, which also changes its color.
You need to scroll to the moment when the color changes and with the help of the code inspector find this section.
http://dl3.joxi.net/drive/2018/10/17/0008/0401/545169/69/43b6ff2950.png
Also, right in the inspector write the desired property and its value.
http://dl4.joxi.net/drive/2018/10/17/0008/0401/545169/69/a01fa5196a.png
If the property does not apply, at the end add the !important.
http://dl4.joxi.net/drive/2018/10/17/0008/0401/545169/69/3415e46260.png
Copy the result and paste it into custom.css.

#sp-header.menu-fixed {
background: #000 !important;
}

Using the code inspector will help you easily customize everything you want. Use it. And learn css. ;)


There are no replies made for this post yet.
However, you are not allowed to reply to this post.

Leaderboard (30 days)

Sifat

Sifat

Total Accepted Answers: 135
Paul Frankowski

Paul Frankowski

Total Accepted Answers: 120
Toufiq

Toufiq

Total Accepted Answers: 65
Pavel

Pavel

Total Accepted Answers: 5
Mohammed Ahmed

Mohammed Ahmed

Total Accepted Answers: 2

100+

Templates

200,000+

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us