1

Test Site Example: [1] http://test.hauptstadtventures.com

Since [1] is a child theme of Avada Fusion [2] https://avada.theme-fusion.com, one of the top-selling themes out there, I hope this is relevant for other developers as well.

I have the following problem: The menu item 2 should be centered between the logo and the neighboring item 1. Same logic should apply to item 3.

|[item 1] <-----------> [item 2] <-----------> [LOGO] <-----------> [items 3]<-----------> [item 4]|

This is the current as-is state. Items 2 and 3 are not centered bewtween the logo and their neighboring items

Constraints:

  • The main menu is 100% (with a pixel-based padding left of item 1 and right of item 4).
  • Logo is at the center of the window / content, meaning: it does not move just as the center item [BASIC SERVICES] in the fiddle of the top answer of [3] by @Danield.
  • Items 1 is aligned left and items 4 is aligned right.
  • Items 2 and 3 are floating between the logo and their neighboring items, always centered, taking the anchor text length into account.
  • Items 2 and 3 stay centered when the window width is being changed.
  • No changes to the HTML/DOM tree, no javascript/jQuery positioning solutions, I am looking for an elegant CSS-only solution that can be applied in [1]. I am aware that there are already potentially interferring CSS rules, please consider it as part of the challenge.

Development environment:

  • Avada version: 5.7.1
  • WP version: 4.9.8

I had a look at the following approaches, tired to implement them, but had no success so far:

[3] How to stretch a fixed number of horizontal navigation items evenly and fully across a specified container

[4] How can I create a horizontal menu with each item being equal width and spacing inbetween?

I also developed a jQuery solution that is positioning the css left values of items 2 and 3, but there must be an elegant css solution. Right?

Thanks in advance!

dev_arn0ld
  • 11
  • 2
  • I would fiddle around with `justify-content: space-around;` or `justify-content: space-between;` on the `ul`, and remove the `flex:1` on the `li`s – Stender Dec 04 '18 at 14:27
  • sorry - it might be `justify-content: space-evenly;` – Stender Dec 04 '18 at 14:28
  • @Stender thanks! I'll implement it and will give you feedback. – dev_arn0ld Dec 04 '18 at 14:49
  • @Stender I'm nearly there. I've put `justify-content: space-between;` into the
      tag [1] https://imgur.com/QRUY1CD . Now the spacing between logo and item elements is perfect [2] https://imgur.com/4ppfUza, but the logo is not centered within the window / content as it is before deactivating `flex:1` for the
    • tags [3] https://imgur.com/QbQUVCO . I should have been more explicit about this constraint, I update my question. Any idea how to move on?
     – dev_arn0ld Dec 04 '18 at 15:47

0 Answers0