Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • July 28, 2015 at 7:51 pm #479883
    MLA18

    I have searched the forum and attempted to uncover the CSS combination through Firebug in order to position the Logo Left, with the main navigation positioned below but also centered.

    But I can’t seem the to find the right combination. Is there a quick CSS change that would make this possible?

    Thanks!

    July 29, 2015 at 3:51 am #479985
    Dake

    Hey MLA18!

    Please add the below css to your custom css section:

    .html_header_top.html_bottom_nav_header .main_menu {
    right: -8% !important;
}

#top #menu-item-search {
    right: 15% !important;
}

    Best regards,
    Dake

    July 29, 2015 at 3:36 pm #480294
    MLA18

    Thanks for that, but nothing has changed…the navigation menu is still positioned to the left and not centered.

    Thanks!

    July 30, 2015 at 4:24 pm #480766
    Dake

    Hey!

    Through the use of the below media queries, the navigation and search icons are now positioned to the center:

    @media only screen and (max-width: 1366px) {
.av-main-nav > li {
    right: -8% !important;
}

#top #menu-item-search {
    right: 10% !important;
}
}

@media only screen and (max-width: 1340px) {
.av-main-nav > li {
    right: -4% !important;
}

#top #menu-item-search {
    right: 5% !important;
}
}

@media only screen and (max-width: 1210px) {
.av-main-nav > li {
    right: -2% !important;
}

#top #menu-item-search {
    right: 2% !important;
}
}

@media only screen and (max-width: 1160px) {
.av-main-nav > li {
    right: -1% !important;
}

#top #menu-item-search {
    right: 1% !important;
}
}

@media only screen and (max-width: 1160px) {
.av-main-nav > li {
    right: -1% !important;
}

#top #menu-item-search {
    right: 1% !important;
}
}

    Cheers!
    Dake

    July 30, 2015 at 4:48 pm #480773
    MLA18

    Thank you for that! However the menu is still positioned to the left. I have cleared the cache and tried 5 different browsers.

    I have attached a screenshot below.

    Thanks!

    July 30, 2015 at 5:58 pm #480804
    Yigit

    Hi!

    Please go to Enfold theme options > Header and choose to display “Logo center, menu below” and then add following code to Quick CSS

    .html_header_top.html_logo_center .logo {
  left: 0;
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
}

    Best regards,
    Yigit

    July 30, 2015 at 6:04 pm #480809
    MLA18

    Perfect. That worked. As always, you guys rock!

    Thank you very much!

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘CSS for Logo Left, Menu Below & Centered’ is closed to new replies.