0

I am new to web design and development and started to create a website on here using Content Management System called Joomla. However, I am currently experiencing an issue where menu section cannot stretch out long enough to fit the entire width of the page (if that makes sense, forgive me for my poor grammar skills).

Previously I had an issue with the positioning of the elements moving around the page whenever I zoomed in and out of the page, thankfully I used the solution from here by positioning the min and max width of the page body, however this does not solve the menu section issue that I am experiencing (it's a bit worst when viewing on mobile phones).

I would like all my menu headers to fill the entire page width horizontally, without leaving a gap. I tried using a combination of float and width CSS attributes from here but unfortunately no lucky

Any bit of help or solution on tackling this issue would be greatly appreciated, thanks.

Community
  • 1
  • 1
user3296529
  • 27
  • 4

2 Answers2

0

Min-width: 100% is going to be the solution.

What you have to consider, though, is "nesting", that is, the menu header being "inside" another element that already is not wide enough. In that case, you would have to set ALL the elements you menu header is nested inside to min-width: 100% (or just width: 100%) as well

OR

move the menu header to another position where it isn't nested. Having never used joomla myself, I can't tell you which solution is easier.

Kjeld Schmidt
  • 771
  • 8
  • 19
0

If ancient browser support is not a problem, you can make use of css3 Flex property.

apply

display:flex; justify-content: space-around for the <ul> and remove float:left

Here's a screenshot of your website after doing so

image

Read more about css Flex @ css-tricks

T J
  • 42,762
  • 13
  • 83
  • 138