Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • May 29, 2018 at 7:46 am #963511
    Archie

    Hi there Enfold team!

    I wanted to create a menu where the logo is at the center and some menu items to the left, and some to the right. I found this fix from Vinay:

    https://kriesi.at/support/topic/logo-center-with-menu-to-left-and-right/?login_error

    I added the CSS code to Custom CSS and here’s how the menu currently looks like:

    Home

    Can you help me fix this so that the menu links and logo are vertically centered? Right now the logo is aligned to the top and the links aligned to the bottom, and when you scroll down there is a whitespace in between the top of the screen and the menu bar.

    Thank you! :)

    • This topic was modified 6 years, 5 months ago by Archie.
    May 31, 2018 at 9:38 am #964698
    Victoria

    Hey hackoffseries,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
@media only screen and (min-width: 990px) {
  div .logo {
    top: 10px;
  }
  .html_header_top.html_bottom_nav_header #header_main_alternate .main_menu {
    top: -35px;
  }
  .html_header_top.html_logo_center .logo {
      left: 55%;
  }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    May 31, 2018 at 2:23 pm #964788
    Archie

    Thank you for your response Victoria!

    I added your code to Quick CSS. Here’s how it looks currently:

    Home

    And here is the code that I have added. (Vinay’s code and your code).

    .av-main-nav li:nth-child(3) {
    margin-right:300px;
}

.html_header_top.html_header_sticky #header {
    position: fixed;
    top: 50px;
}

.html_top_nav_header .av-logo-container {
	top: -20px;	
    z-index: 999;
}

@media only screen and (max-width: 989px) {
.html_top_nav_header .av-logo-container {
	top: 0px;	
	left:0;
}
}

@media only screen and (min-width: 990px) {
  div .logo {
    top: 10px;
  }
  .html_header_top.html_bottom_nav_header #header_main_alternate .main_menu {
    top: -35px;
  }
  .html_header_top.html_logo_center .logo {
      left: 55%;
  }
}

    Can you help me make the necessary adjustments please?

    Thanks you so much! :)

    June 1, 2018 at 7:00 pm #965522
    Vinay

    Hi,

    This is a bit outdated solution please check out the documentation for the latest fix

    Menu

    Please remove the old code before you start again :)

    If you have any issue do not worry we are here to help you.

    Best regards,
    Vinay

    June 1, 2018 at 7:02 pm #965524
    Archie

    Hi Vinay!

    Thank you for your response. Can you please send a link to the documentation instead?

    I can seem to open the one you sent here.

    Thank you!

    June 1, 2018 at 11:58 pm #965603
    Vinay

    Hi,

    The above mentioned link should open for you if it does not please go to https://kriesi.at/documentation/enfold/menu and check the logo center split menu section please :)

    Best regards,
    Vinay

    March 20, 2020 at 10:11 am #1194747
    luckyday4

    Hi Vinay,
    I tried the suggested solution on my website but it appears that menu became unclickable.

    It seems it’s either the menu or the logo and naturally I would like both.

    EDIT : Works fine I had a saving changes issue

    • This reply was modified 4 years, 7 months ago by luckyday4.
    March 21, 2020 at 3:55 am #1194989
    Rikard

    Hi luckyday4,

    Thanks for the update, so everything is working as it should now?

    Best regards,
    Rikard

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