Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • November 18, 2020 at 11:14 pm #1261374
    jomo5280

    I see documentation for adding a widget to the main nav –
    (Logo Left, Nav Center, Widget Right)

    how would I make the Nav left justify instead of being centered?
    thanks!

    November 19, 2020 at 12:51 am #1261386
    Jordan Shannon

    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 Shannon

    November 19, 2020 at 12:52 am #1261390
    jomo5280

    This is the link to your documentation and example

    November 19, 2020 at 1:44 am #1261420
    Jordan Shannon

    Hi,

    Apologies, I meant can you link us to your site so we can view the navigation?

    Best regards,
    Jordan Shannon

    November 19, 2020 at 4:20 am #1261436
    jomo5280

    currently 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 ago by jomo5280.
    November 19, 2020 at 4:23 am #1261438
    jomo5280

    This 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
    jomo5280

    Please refer to static image

    • This reply was modified 4 years ago by jomo5280.
    November 25, 2020 at 4:42 am #1262888
    Ismael

    Hi,

    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,
    Ismael

    December 1, 2020 at 8:49 pm #1264314
    jomo5280

    Thank you @ismael !! you rock! I haven’t messed around with Flex / Justify content – looks pretty powerful!

    December 2, 2020 at 5:13 am #1264377
    Jordan Shannon

    Hi,

    Did you need additional help with this topic or shall we close?

    Best regards,
    Jordan Shannon

    December 3, 2020 at 11:17 pm #1264893
    jomo5280

    @ismael – thanks again –
    how would I do the opposite approach – and float the nav to the right instead of left?
    I tried using justify-content end – but that did not work.
    thanks!

    • This reply was modified 3 years, 11 months ago by jomo5280.
    December 7, 2020 at 8:16 am #1265405
    Ismael

    Hi,

    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,
    Ismael

    December 7, 2020 at 5:30 pm #1265524
    jomo5280

    change to “end” didn’t seem to affect any change – Nav is still left justified.
    thanks!

    December 7, 2020 at 5:45 pm #1265534
    Jordan Shannon

    Hi,

    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 Shannon

    December 7, 2020 at 5:47 pm #1265535
    jomo5280

    Yes I did that – and tested in Chrome Dev tools as well.

    December 10, 2020 at 7:15 am #1266199
    Ismael

    Hi,

    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

  • Author
    Posts
Viewing 16 posts - 1 through 16 (of 16 total)
  • You must be logged in to reply to this topic.