1. John Wolffe
  2. Resort
  3. Sunday, 16 December 2018
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)
Accepted Answer
Accepted Answer Pending Moderation

.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; }
  1. more than a month ago
  2. Resort
  3. # Permalink
Responses (10)
Accepted Answer Pending Moderation
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;}
  1. more than a month ago
  2. Resort
  3. # 1
Accepted Answer Pending Moderation
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.
  1. more than a month ago
  2. Resort
  3. # 2
Accepted Answer Pending Moderation
About logo shrink. It was from template styles, to save some space.
Solution:

.menu-fixed#sp-header .logo img { width: auto; }
  1. more than a month ago
  2. Resort
  3. # 3
Accepted Answer Pending Moderation
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)
  1. more than a month ago
  2. Resort
  3. # 4
Accepted Answer Pending Moderation
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
  1. more than a month ago
  2. Resort
  3. # 5
Accepted Answer Pending Moderation
you're welcome
  1. more than a month ago
  2. Resort
  3. # 6
Accepted Answer Pending Moderation
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)
  1. more than a month ago
  2. Resort
  3. # 7
Accepted Answer Pending Moderation

#sp-top3 .sp-module ul.nav > li > a { padding: 0 15px; font-size: 14px; font-family: Nunito; }
  1. more than a month ago
  2. Resort
  3. # 8
Accepted Answer Pending Moderation
Paul,
Worked well, thank you for helping launch another successful Joomshaper project.
John
  1. more than a month ago
  2. Resort
  3. # 9


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


This forum is archived

This forum has been archived. Please use JoomShaper official support system.