Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #349638

    See link below.

    We would like the header background to look the same when it’s shrunk – not turn black, but stay transparent.

    #349888

    Hey!

    Try adding this code to the Quick CSS:

    .header_color .header_bg{
        background: transparent !important;
    }

    Cheers! 
    Josue

    #350046

    That’s great!

    Also, can you look what happens when a browser goes below (approximately) ~845px? Is there a way to keep the last menu item from dropping down without messing with other spacing?

    Then, when it drops below, ~730 px, the header logo gets tucked away too far as well. Is there a way to keep that visible without messing with other spacing?

    #350205

    Hey!

    In this case i think it would be better to enable mobile menu activation for tablets, Enfold > Header > Mobile Menu.

    Best regards,
    Josue

    #350237

    Doing that actually makes it worse because it turns into a mobile menu at an even wider width. I’m actually trying to turn off the mobile menu on my computer

    Can you try adjusting the width and seeing what I mean? If possible, I don’t want the mobile menu on computers.

    #351071

    Hi!

    Please use this to adjust the menu padding and font size on smaller screens:

    @media only screen and (max-width: 989px) and (min-width: 768px) {
    .responsive .main_menu ul:first-child > li > a {
    padding: 0 8px;
    font-size: 17px !important;
    }
    }

    Cheers!
    Ismael

    #351297
    This reply has been marked as private.
    #351983

    Hey!

    Please replace the code with this:

    @media only screen and (max-width: 989px) {
    .responsive .main_menu ul:first-child > li > a {
    padding: 0 7px;
    font-size: 16px !important;
    }
    }

    Best regards,
    Ismael

    #352265
    This reply has been marked as private.
    #352931

    Hey!

    Are you trying to test this by resizing the browser? Site looks fine on an actual tablet device. I’m not sure why you have to set element position to static. It is messing up the layout of the site. Please add this on Quick CSS:

    @media only screen and (max-width: 767px) {
    .responsive #top #main {
    padding-top: 30px !important;
    margin: 0;
    }
    
    strong.logo {
    top: 50px;
    }
    
    #advanced_menu_toggle, #advanced_menu_hide {
    top: 80%;
    }
    }

    For further modifications, please visit Envato Studio or Werkpress.

    Cheers!
    Ismael

    #353091
    This reply has been marked as private.
    #353441

    Hey!

    I think all is sorted now, i’ve added and modified some things in your Quick CSS, most of these problems appeared because the codes you were using to have this header layout were affecting the mobile view too, it should have been limited to desktop only, in the future you can use this media query for that:

    @media only screen and (min-width: 767px) {
    /* Only desktop */
    }

    Best regards,
    Josue

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