-
AuthorPosts
-
November 18, 2020 at 11:14 pm #1261374November 19, 2020 at 12:51 am #1261386
Hey jomo5280,
Can you provide a link to the site/page in question so we can look into this further. The nav can likely be adjusted with css.
Best regards,
Jordan ShannonNovember 19, 2020 at 12:52 am #1261390November 19, 2020 at 1:44 am #1261420Hi,
Apologies, I meant can you link us to your site so we can view the navigation?
Best regards,
Jordan ShannonNovember 19, 2020 at 4:20 am #1261436currently site is on a staging server which only I can view, and this is the code I am using:
(I just need .main_menu to float left next to logo, as oppose to being centered in the header (not using justify-content: space-between;)/*-------------------------------- » Header --------------------------------*/ /* Height */ #top #header #header_main .container.av-logo-container { height: inherit; /* Auto height: Header takes the height of the contents */ } /* Header inner container */ #top #header #header_main .container.av-logo-container .inner-container { height: inherit; position: relative !important; flex-wrap: nowrap; justify-content: space-between; } /* Wrappers --------------------------------*/ /* Header content and Topbar */ .responsive #top #header { flex-wrap: wrap; } /* Header contents: Logo, Menu, Social Icons and Widgets. */ .responsive #top #header #header_main { flex-basis: 100%; } /*-------------------------------- » Menu --------------------------------*/ /* Menu outer container: Menu with siblings cart and social icons */ .responsive #top #header #header_main .inner-container .main_menu { order: 0; flex-basis: auto; /* Use calc to minus the width of the logo */ align-items: center; align-self: center; } /* Navigation */ #header .av-main-nav { display: flex; flex-wrap: nowrap; }
- This reply was modified 4 years, 1 month ago by jomo5280.
November 19, 2020 at 4:23 am #1261438This is the Link to documentation:
https://kriesi.at/documentation/enfold/example-of-logo-left-menu-center-widget-right/#toggle-id-2
November 19, 2020 at 10:37 pm #1261652- This reply was modified 4 years, 1 month ago by jomo5280.
November 25, 2020 at 4:42 am #1262888Hi,
Thank you for the screenshot.
We have to set the justify-content property of the inner container from space-between to start so that the elements float to the left.
#top #header #header_main .container.av-logo-container .inner-container { height: inherit; position: relative !important; flex-wrap: nowrap; justify-content: start; }
We can then move the phone info to the right of the container with this css code.
.responsive #top #header #header_main .inner-container .widget { right: 0; position: absolute !important; }
Best regards,
IsmaelDecember 1, 2020 at 8:49 pm #1264314Thank you @ismael !! you rock! I haven’t messed around with Flex / Justify content – looks pretty powerful!
December 2, 2020 at 5:13 am #1264377Hi,
Did you need additional help with this topic or shall we close?
Best regards,
Jordan ShannonDecember 3, 2020 at 11:17 pm #1264893December 7, 2020 at 8:16 am #1265405Hi,
You are welcome! If you want to move the menu to the right instead, try to set the justify-content property from start to end to move the contents to the end or to the right of the flex contaner
#top #header #header_main .container.av-logo-container .inner-container { height: inherit; position: relative !important; flex-wrap: nowrap; justify-content: end; }
Best regards,
IsmaelDecember 7, 2020 at 5:30 pm #1265524change to “end” didn’t seem to affect any change – Nav is still left justified.
thanks!December 7, 2020 at 5:45 pm #1265534Hi,
Did you add the code to the very top of quick css so it runs first? Also, clear the cache a few times over.
Best regards,
Jordan ShannonDecember 7, 2020 at 5:47 pm #1265535Yes I did that – and tested in Chrome Dev tools as well.
December 10, 2020 at 7:15 am #1266199Hi,
Try to revert the value of the justify-content property back to space-between, then adjust the order of the elements so that the logo comes before the menu, then move the widget or phone number to the left.
.responsive #top #header #header_main .inner-container .main_menu { order: 3; } .responsive #top #header #header_main .inner-container .logo { order: 2; } .responsive #top #header #header_main .inner-container .widget { order: 1; }
You may have to remove this css code.
.responsive #top #header #header_main .inner-container .widget { right: 0; position: absolute !important; }
Best regards,
Ismael -
AuthorPosts
- You must be logged in to reply to this topic.