-
Posts
-
Hi Kriesi team,
we are currently working on our new comany’s site and we are experiencing problems with our main navigation on top – We tried setting it up with additional CSS code in our CSS file, still we fail to have the top navigation being perfectly centered and the sub menus being perfectly alligned underneath the main menu entries. All of the sub menus appear a little bit off, either a few pixels too far to the right, or a few pixels too far to the left.
As you can see we are nearly there – still we are unable to perfectly allign those items, so the appear symmetrical.The link to our homepage can be seen in the private content section, aswell as the link to our Stylesheet.
We are looking forward to your help!
Thanks in advance
P3 SystemsHey P3Systems!
We would love to help you but your website is not opening it re-directs to an IP address http://10.14.**.** and say’s website not available please get back to us when your site is up and let us know the issue with a screenshot exactly what you want so we can help you better.
Best regards,
VinayHi,
Site is accessible now, thanks. I’m not sure exactly what you are trying to do though, could you post a screenshot highlighting your intentions so that we can gain a better understanding please?
Regards,
Rikard
We want the “Know How” menu entry to be centered directly underneath our logo – and all the other elements to be perfectly symmetrical.
Also we noticed, the offset of the submenu differs for each element, some submenus are a few pixels more alligned to left than the others. We did not find a solution to modify and move those single entries seperately.
perfectly symmetrie is in my opinion not possible if you have words (your links) with different wordlength !
Products – P3 – perhaps you can give the links not a variable width – set to a defined width in which all words have enough place not to overflow (or break)the shift of the submenu you can correct with the padding:
#top .av-main-nav ul a { padding: 8px 15px; }play with the 15px
Hey!
Did you find a work around? The menu looks centered please see screenshot attached…
Somewhere in the styles you have set width and margins to the menu
.menu-item-top-level { width: 6.67%; margin: 0 6.62%; }You can try the below code if it don’t look right please remove the customizations you have made and try this again.
.av-main-nav { display:flex; justify-content: space-between; }Best regards,
VinayThank you both for your help –
I just added your code to our page and it looks like this:
it seems like the justify-content: space-between; is actually not working – Still after doing some research, the flex-content option might be what we are looking for.
on my test environment it seem to be the perfect mid – even if the words are totaly different wordslength.
the ul element sits perfect in the center – but your wordlength of navigation is asymetrical.i highlighted ul that you can see it is perfect mid
why don’t you correct your logo to exactly above “know-how”
Hey!
@Guenni007 thanks for sharing your tip :)
@P3Systems , please share the admin login details in private content and permission to modify/add CSS so we can help you better.Cheers!
VinayHey!
Is the number of menu items limited to only 5? If yes then you can apply a width property to the menu list elements:
.av-main-nav > li { width: 20%; }Cheers!
IsmaelHey Ismael –
this actully makes the top menu perfectly centered – sadly, the submenu is not moved and still badly positioned, if I then move the submenus by 120pixel, the sub menu fits perfectly for menu entry 1 (Products) and 3 (Know-How) – but is completely broken for menu item 2 (Services).
By now I didn’t find a solution to give each submenu a seperate margin, to align them perfectly.
I also noticed, that it’s impossible to access the WordPress Admin from WWW as it’s currently blocked by our server for security reasons – We are currently trying to find a way to give you access to our WordPress Admin so you can add some custom css.
- You must be logged in to reply to this topic.