Viewing 23 posts - 1 through 23 (of 23 total)
  • Author
    Posts
  • September 20, 2018 at 9:17 pm #1012467
    amanda-mdllc

    Good Afternoon,

    I was wondering how I can go about making my sticky nav on my website have a larger logo and the links centered horizontally how it is when the page is first loaded. I have added some CSS to the nav to have the logo centered in the middle of the nav but when the page scrolls the alignment no longer matches how it was prior to the scroll.

    Thanks so much!
    ~Amanda

    September 21, 2018 at 5:25 am #1012636
    Ismael

    Hey amanda-mdllc,

    Thank you for using Enfold.

    This should center align the menu items on scroll and increase the logo size.

    .header-scrolled #header_main_alternate {
    top: -30px;
}

.header-scrolled .logo, .header-scrolled .logo a, .header-scrolled .logo a img {
    max-height: 80px !important;
    height: 80px;
}

    Best regards,
    Ismael

    September 21, 2018 at 3:25 pm #1012804
    amanda-mdllc

    That worked perfectly!! Thank you so much!

    September 21, 2018 at 4:57 pm #1012835
    amanda-mdllc

    One last question regarding this website. I have changed the highlight color on the website and added some css to it but I cannot get the opacity lowered. I would like it to function in a way that when any text is highlighted they can still see the text that is underneath the highlight.

    ::selection {
    background: #bc9b6a; /* WebKit/Blink Browsers */
    opacity: 0.3!Important;
    }
    ::-moz-selection {
    background: #bc9b6a; /* Gecko Browsers */
    opacity: 0.3!Important;
    }

    September 24, 2018 at 5:04 am #1013474
    Ismael

    Hi,

    Thanks for the update. Unfortunately, you can’t change the highlight opacity. Try to apply a font color.

    ::selection {
    background: #bc9b6a;
    color: #000000;
}

    Best regards,
    Ismael

    September 24, 2018 at 3:19 pm #1013656
    amanda-mdllc

    That fixed it! Thanks so much!! :)

    September 24, 2018 at 3:38 pm #1013669
    amanda-mdllc

    Ok I lied lol. Sorry I have 1 more. For that same nav we foxed for mobile at the beginning of this thread. When it is on iPad /Tablet I was wanting to give me the hamburger navigation. But when I have the mobile menu activated I cannot see the menu and the logo hasn’t switched from the light version to the dark version.

    What can I do for this?
    Thanks!
    ~Amanda

    September 25, 2018 at 5:26 am #1013981
    Ismael

    Hi,

    I can’t access the site using the credentials above. Did you change it? Please check the info carefully.

    Best regards,
    Ismael

    September 25, 2018 at 5:15 pm #1014301
    amanda-mdllc

    No that is the information to get to the staging website. I have attached both the staging login info as well as the WP-Admin info below for you.

    Thanks in advance!
    ~Amanda

    September 26, 2018 at 11:06 am #1014659
    Ismael

    Hi,

    Thanks for the update.

    We adjusted the header layout a bit with these css codes.

    @media only screen and (max-width: 989px) {
.responsive #top .av_header_transparency.av_alternate_logo_active .logo a > img {
    opacity: 1;
    padding: 5px;
}

.responsive .logo img {
    height: auto !important;
    width: auto;
    max-width: 100%;
    display: block;
    max-height: 80px;
    transform: none;
    left: 0;
}

#top .av_header_transparency .phone-info, #top .av_header_transparency .social_bookmarks li a {
    color: #000000;
}

.header_color div .av-hamburger-inner, .header_color div .av-hamburger-inner::before, .header_color div .av-hamburger-inner::after {
    background-color: #231f20;
}

.responsive #top .av_header_transparency .logo img.alternate {
    display: none;
}

.responsive #top .logo {
    position: static;
    display: table;
    height: 80px !important;
    float: none;
    padding: 0;
    border: none;
    width: 80%;
}

.responsive #top #wrap_all .container {
    width: 85%;
    max-width: 85%;
    margin: 0 auto;
    padding-left: 0;
    padding-right: 0;
    float: none;
}
}

    Best regards,
    Ismael

    September 26, 2018 at 3:56 pm #1014808
    amanda-mdllc

    Wonderful! That is perfect! Only thing is the logo is the white version not this version http://staging.granvillefarm.flywheelsites.com/wp-content/uploads/2018/09/GranvilleFarms-website-logo.png

    I tried to locate and change it but no matter what I did isn’t working. What do I need to do with this to make it show up with the dark version?

    Thanks!
    ~Amanda

    September 27, 2018 at 5:31 am #1015110
    Ismael

    Hi,

    I adjusted the code a bit. The default logo should be visible now.

    Best regards,
    Ismael

    September 27, 2018 at 3:07 pm #1015318
    amanda-mdllc

    Perfect! This project is a wrap :)

    Thanks!
    ~Amanda

    September 27, 2018 at 5:13 pm #1015391
    Victoria

    Hi Amanda,

    Glad we could help :)

    If you need further assistance please let us know.
    Best regards,
    Victoria

    October 2, 2018 at 8:32 pm #1017212
    amanda-mdllc

    Hello there Victoria

    Is there a way to make the hamburger come up on the sticking point of 1000px? It goes to the hamburger at 900px and is fine with a regular navigation at 1100px. I tried to make the @media only screen and (max-width: 1000px) but that didn’t help.

    Thanks!
    ~Amanda

    October 4, 2018 at 12:54 pm #1017868
    Victoria

    Hi Amanda,

    I was going to check your website, but the .htpass credentials are not working anymore, can you please update them?

    Best regards,
    Victoria

    October 8, 2018 at 3:22 pm #1019007
    amanda-mdllc

    Good Morning!
    Here you go. I am attaching them below.

    October 8, 2018 at 3:42 pm #1019014
    amanda-mdllc

    Good Morning!
    Please disregard the login into from earlier. I pasted the wrong info we moved the site from staging to being live. Just need to get the mobile stocking point break to be at 1000 for the hamburger to display. I plugged the code in but it still breaks the menu when it’s mobile.
    Here is the new information.

    October 10, 2018 at 8:21 am #1019828
    Victoria

    Hi amanda-mdllc,

    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 (max-width: 1024px) {
  nav.main_menu {
    display: block !important;
  }
  .menu-item {
    display: none;
  }
  .av-burger-menu-main.menu-item-avia-special {
    display: block;
  }
  #header_main_alternate {
    display: none;
  }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    October 10, 2018 at 3:47 pm #1019975
    amanda-mdllc
    This reply has been marked as private.
    October 12, 2018 at 8:11 pm #1020811
    Victoria

    Hi Amanda,

    https://cl.ly/42ca05aa4dec Here is what I am seeing. Do you want the header to be white and burger blacK?

    If you need further assistance please let us know.
    Best regards,
    Victoria

    October 12, 2018 at 8:42 pm #1020830
    amanda-mdllc
    This reply has been marked as private.
    October 13, 2018 at 6:20 am #1020948
    Vinay

    Hi,

    It’s not clear which screenshot you are referring to? I have changed the media query in the Quick CSS. Now the mobile menu triggers before the split menu starts to form another line at 1224 pixels.

    Best regards,
    Vinay

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