Support Forums

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

Your Time: Our Time:

Modification to the main menu

Featured Lock Resolved Task
I need to make several modifications to the main menu.
1. Change the background color of the menu bar to slightly transparent white
2. Change the font of the menu item from white to black.
3 Currently the logo extends below the menu bar. I would like the logo to extend above of the menu bar as well equally. See attachment.
4 Keep the space at the top of the menu bar from closing up when scrolling.

Site http://beemstudios.com/

Thank you for your help.

Attachments (1)

  • Capture.JPG
    Capture.JPG 35.3 KB

11 Answers

Paul Frankowski - Staff

More than a month ago #Permalink

.sp-module ul.nav > li { display: inline-block; border: none; }
.sp-module ul.nav > li > a {
padding: 0 5px;
line-height: 70px;
text-transform: uppercase; }

.sp-module ul.nav > li > a::before { display:none; }

Paul Frankowski - Staff

More than a month ago #Permalink
Hi,
before we start please read:
https://www.joomshaper.com/documentation/helix-framework/helix3#custom-css-header-code
and
https://www.joomshaper.com/documentation/helix-framework/helix3#menu-settings-customization
and
https://www.joomshaper.com/blog/which-line-of-css-i-have-to-edit-code-inspector-in-action
---------

I can give you only a few tips, we do not teach CSS here.


.has-slideshow#sp-header { background-color: rgba(255,255,255,0.5); }

.has-slideshow.menu-fixed#sp-header {
background: rgba(255,255,255,0.9) !important;
margin-top: 35px; }

.has-slideshow#sp-header .sp-megamenu-parent > li > a {color: black;}

John Wolffe

More than a month ago #Permalink
Thank you , the reference material is a great resource for css as well as the code snippets worked perfectly.

One thing I'm still trying to figure out is the logo shrinks in size once you start to scroll down the page.
How can I get that to stop happening.

The other issue is the menu on the right side of the logo (which I added after the fact so I'm sure I missed something in the styling of the position) is not formatting properly like the menu on the left. Any direction on how to resolve this would also be greatly appreciated.

Paul Frankowski - Staff

More than a month ago #Permalink
About logo shrink. It was from template styles, to save some space.
Solution:

.menu-fixed#sp-header .logo img { width: auto; }

John Wolffe

More than a month ago #Permalink
Worked perfectly.

The last thing I'm trying to accomplish is make the 2nd menu after the logo horizontal like the menu on the left. I tried a module class suffix but nothing seems to be working.
Thanks again for helping me through this process.

Attachments (1)

  • Capture1.JPG
    Capture1.JPG 29.6 KB

John Wolffe

More than a month ago #Permalink
Paul
Worked perfectly, as always I learned a lot from your answers that I will be able to apply to future projects.
Thank you for all your help,
John

Paul Frankowski - Staff

More than a month ago #Permalink
you're welcome

John Wolffe

More than a month ago #Permalink
Having one last difficulty, I can not seem to get the menu items on the right to be the same height and spacing as the ones on the left side of the logo. Any advice on what I need to add or change would be greatly appreciated.
Thanks

url is http://beemstudios.com/

Attachments (1)

  • Capturea.JPG
    Capturea.JPG 12.6 KB

Paul Frankowski - Staff

More than a month ago #Permalink

#sp-top3 .sp-module ul.nav > li > a { padding: 0 15px; font-size: 14px; font-family: Nunito; }

John Wolffe

More than a month ago #Permalink
Paul,
Worked well, thank you for helping launch another successful Joomshaper project.
John


There are no replies made for this post yet.
Be one of the first to reply to this post!

Leaderboard (30 days)

Sifat

Sifat

Total Accepted Answers: 153
Paul Frankowski

Paul Frankowski

Total Accepted Answers: 89
Toufiq

Toufiq

Total Accepted Answers: 21
Pavel

Pavel

Total Accepted Answers: 3
Al Mamun

Al Mamun

Total Accepted Answers: 3

112

Templates

289165

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