Support Forums

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

Your Time: Our Time:

How do I make menu items fill whole menu area evenly

Featured Lock Resolved Issue
Currently all menu items are displayed in the center of the menu area - but how can I make them fill the width of the menu area so they are evenly spaced to the edges of the web page content. In other words I want to justify all menu items.

Attachments (1)

  • Joomshaper-capture.jpg
    Joomshaper-capture.jpg 121.1 KB

8 Answers

Paul Frankowski - Staff

More than a month ago #Permalink
Hi,
please show me graphic mock-up how it should look like.
Then I will tell you if we can help or it's beyond support.

Paul Frankowski - Staff

More than a month ago #Permalink
BTW
You can increase spaces between menu items using custom CSS

@media (min-width: 1024px) {
.sp-megamenu-parent > li > a, .sp-megamenu-parent > li > span {padding: 0 25px;}
}

sydk2017

More than a month ago #Permalink
Hi,
please show me graphic mock-up how it should look like.
Then I will tell you if we can help or it's beyond support.


The "ideal meu capture" is what I would like - the Joomshaper capture is what it looks like now - would like the menu to go all the way to the left and right hand sides.

The code you sent to increase spaces works - that's actually the "ideal" graphic - but now on ipad - 2 of the menu items drop under the menu area.

So now the questions is - can the menu items be justified without adding padding so they resize to different devices? Or can we force hamburger menu for ipads, etc so menu items do not get pushed off of the menu area?


Thanks for your help.....

Attachments (2)

  • Ideal-menu-capture.jpg
    Ideal-menu-capture.jpg 136.2 KB
  • Joomshaper-capture.jpg
    Joomshaper-capture.jpg 121.1 KB

Pavel

More than a month ago #Permalink
This will require deeper css knowledge from you. I can only give a general example.
Step one: Set the css class for all menu items. This is necessary so that you can later bind the code to this class.
http://dl4.joxi.net/drive/2019/04/13/0008/0401/545169/69/a04a8dda5b.png
Step two: On the largest screen resolution, select the appropriate width of the menu items based on their number. The browser code inspector is best suited for this.
An example from one of my clients sites. (Your width value will be different)

.sp-megamenu-parent > li {
width: 16.2%;
}

Step three.Then see how it works on md screens. If you have too long menu item headers from either a few words or have a drop-down list, in this case the element may shift below.
http://dl3.joxi.net/drive/2019/04/13/0008/0401/545169/69/b9078fce81.png
To fix this, you will need code for the class that was created in step one
For example.

@media (max-width: 1200px) {
a.my-menu-item {
display: flex !important;
justify-content: center;
white-space: nowrap;
}
}

In your particular case, other small css settings may be required. Therefore, the best way to do everything as you want is to first learn css.

sydk2017

More than a month ago #Permalink
Thanks for the info - I will give it a try!

Paul Frankowski - Staff

More than a month ago #Permalink
Give us the feedback after.

David Podesta

More than a month ago #Permalink
wouldn't this mean you need to change the css every time you change the amount of items in the menu.

I have other templates where the menu is justified and changes to fit whenever you change the menu items.

Pavel

More than a month ago #Permalink
wouldn't this mean you need to change the css every time you change the amount of items in the menu.

In css there are always many ways to solve the one problem. In order not to change the code every time when the number of menu items changes, instead of this code ...

.sp-megamenu-parent > li {
width: 16.2%;
}

...you can use this code

.sp-megamenu-parent {
width: 100%;
display: flex;
justify-content: space-between;

}

It all depends on the site.


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: 132
Paul Frankowski

Paul Frankowski

Total Accepted Answers: 98
Toufiq

Toufiq

Total Accepted Answers: 26
Pavel

Pavel

Total Accepted Answers: 4
Al Mamun

Al Mamun

Total Accepted Answers: 3

113

Templates

289845

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