Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • February 13, 2019 at 9:20 pm #1066647
    jeremysecondary

    Hey Guys,
    The Theme is great.
    I got the logo centered with the menu on either side, but I want the base of the menu text to align with the base of the logo and to stay sticky (aligned) when the user scrolls down on the page.

    This is the code I used thus far:
    @media only screen and (min-width:768px) {

    .av-main-nav li:nth-child(1) {
    margin-right:300px;
    }
    .av-logo-container {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    }
    #header {
    .container.av-logo-container {
    top: -30;
    }: 0px;
    }}
    .container.av-logo-container {
    top: 0;
    }

    .av-main-nav > li > a { line-height: 140px !important; }

    February 15, 2019 at 2:57 pm #1067465
    jeremysecondary

    Hi Guys,
    Bumping this thread, any help here would be greatly appreciated!

    February 18, 2019 at 10:43 am #1068256
    Ismael

    Hi,

    Thank you for using Enfold. And I would like to apologize for the late response.

    I tried to check the page but it is password protected. Please include the password in the private field.

    Best regards,
    Ismael

    February 18, 2019 at 2:53 pm #1068382
    jeremysecondary

    Hi Ismael,
    No Worries.
    Pass is below in Private content.
    This is where the code is at currently as I kept trying to figure it out.
    It’s close, but:
    1. The base of the menu text isn’t aligned with the base of the logo
    2. The menu isn’t on either side of the logo
    3. The shrinking logo when user scrolls works, but the base of the menu text isn’t aligned with the base of the logo.

    #top .av_header_transparency #header_meta {
    border-bottom: 0;
    }

    #socket .copyright { width: 100%; text-align: center; }
    #socket .sub_menu_socket { margin-top: -20px; }

    #footer { padding: 0 0 0 0; }

    .cart_dropdown .cart_dropdown_link > span:before {
    font-size: 30px !important;
    }

    a.cart_dropdown_link {
    margin-left: -30px !important;
    margin-right: -28px !important;
    }

    li.wc_payment_method.payment_method_stripe label img {
    font-size: 30px !important;
    }

    .jb-85font { font-size: 85px; line-height: 75px; font-weight: bold;}

    @media only screen and (max-width: 989px) {
    /* Add your Mobile Styles here */
    .av-overlay-on-hover .avia-image-container-inner .av-image-caption-overlay {
    opacity: 1;
    filter: alpha(opacity=100);
    }
    }

    #top div .logo {
    float: none;
    position: absolute;
    left: 50%;
    z-index: 1;
    transform: translate3d(-50%, 0, 0);
    }

    Thanks so much!!

    February 20, 2019 at 8:12 am #1069291
    Ismael

    Hi,

    Thanks for the update.

    1.) Use this css code to adjust the vertical position of the menu items.

    #top #header .av-main-nav > li {
    top: 30px;
}

    2.) We are not really sure what you mean by this. Could you give us a screenshot of the expected design or layout?

    3.) And add this code right below the previous one to re-adjust the position of the menu items on scroll.

    #top .header-scrolled .av-main-nav > li {
    top: 20px;
}

    Best regards,
    Ismael

    February 20, 2019 at 3:02 pm #1069491
    jeremysecondary

    Hi Ismael,
    That didn’t work.
    I added login credentials.

    This is the current code under Quick CSS:

    #top .av_header_transparency #header_meta {
    border-bottom: 0;
    }

    #socket .copyright { width: 100%; text-align: center; }
    #socket .sub_menu_socket { margin-top: -20px; }

    #footer { padding: 0 0 0 0; }

    .cart_dropdown .cart_dropdown_link > span:before {
    font-size: 30px !important;
    }

    a.cart_dropdown_link {
    margin-left: -30px !important;
    margin-right: -28px !important;
    }

    li.wc_payment_method.payment_method_stripe label img {
    font-size: 30px !important;
    }

    .jb-85font { font-size: 85px; line-height: 75px; font-weight: bold;}

    @media only screen and (max-width: 989px) {
    /* Add your Mobile Styles here */
    .av-overlay-on-hover .avia-image-container-inner .av-image-caption-overlay {
    opacity: 1;
    filter: alpha(opacity=100);
    }
    }

    #top div .logo {
    float: none;
    position: absolute;
    left: 50%;
    z-index: 1;
    transform: translate3d(-50%, 0, 0);
    }

    #top #header .av-main-nav > li {
    top: 30px;
    }

    #top .header-scrolled .av-main-nav > li {
    top: 20px;
    }

    Thanks,
    Jeremy

    • This reply was modified 5 years, 9 months ago by jeremysecondary. Reason: To keep some info private
    February 21, 2019 at 7:28 am #1069808
    Ismael

    Hi,

    Thanks for the update.

    The login url is invalid. Did you change it?
    Did you disable the Performance > File Compression settings after adding the css code?

    Best regards,
    Ismael

    February 21, 2019 at 5:39 pm #1070035
    jeremysecondary

    Hi Ismael,
    I did not change the performance compression settings.
    The correct link is in the Private Content area.

    Thanks so much for your help.
    JB

    February 25, 2019 at 3:57 am #1071107
    Ismael

    Hi,

    Did you copy the code from your email? You have to copy any snippet or code directly from this forum. We adjusted the code a bit. It’s working now. Unfortunately, we can’t put the menu items on either side of the logo.

    Best regards,
    Ismael

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