SheFund Make Menu Longer - Question | JoomShaper
🎃 Halloween Sale is Live! Get 35% OFF on all plans. Sale ends soon! Get Offer

SheFund Make Menu Longer

C

carpenterwd

Template 7 months ago

How do I move the navigation further left in SheFund template? I have several headings and it's gone into a second row. See screenshot

0
6 Answers
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 7 months ago #189061

In Template Options > Layout - you need make those changes:

  1. Reduce Logo column width from "3" to "2"
  2. Increase Menu column width from "9" to "10"

Then you will get more space for extra menu item, or longer menu items words.


Also that Custom CSS may be needed

.sp-megamenu-parent > li > a, 
.sp-megamenu-parent > li > span {padding: 0 20px;}

or even 15px

0
Ofi Khan
Ofi Khan
Accepted Answer
Support Agent 7 months ago #189055

Hello carpenterwd,

Thank you for reaching out to our technical support forum. I’m sorry to hear about the trouble you’re experiencing. Rest assured, I will look into this issue for you and work to resolve it as quickly as possible.

Sorry, I could not find your screenshot. Please share a screenshot of your issue to understand it better. Take a screenshot and share via any platform. For example: Lightshot or Imgur

Best regards

0
C
carpenterwd
Accepted Answer
7 months ago #189094
0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 7 months ago #189062

The Header (Logo+Menu) is like the bench on the field, depends on the number of sitting players and how close they sit to each other. Simple math.

0
C
carpenterwd
Accepted Answer
7 months ago #189093

Thanks Paul. I'm not seeing a place to change column widths in Template options.

Screen shot

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 7 months ago #189101

Because as you already saw in that template header is predefined - and to change that grid:

  1. Build your own custom header using Helix guide >> https://www.joomshaper.com/documentation/helix-framework/custom-header
  2. Or, Use Custom CSS to change width of columns. Also easy if you know CSS basics + how bootstrap works. I mean, just set new width (in %) for those two
@media screen and (min-width: 1025px) {
#sp-logo { }
 #sp-menu { }
 }
0