Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • November 11, 2014 at 8:03 pm #349638
    koala

    See link below.

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

    November 12, 2014 at 6:28 am #349888
    Josue

    Hey!

    Try adding this code to the Quick CSS:

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

    Cheers! 
    Josue

    November 12, 2014 at 4:20 pm #350046
    koala

    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?

    November 12, 2014 at 6:29 pm #350205
    Josue

    Hey!

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

    Best regards,
    Josue

    November 12, 2014 at 7:15 pm #350237
    koala

    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.

    November 14, 2014 at 2:31 am #351071
    Ismael

    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

    November 14, 2014 at 4:41 pm #351297
    koala
    This reply has been marked as private.
    November 16, 2014 at 1:41 pm #351983
    Ismael

    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

    November 17, 2014 at 4:44 am #352265
    koala
    This reply has been marked as private.
    November 18, 2014 at 1:12 pm #352931
    Ismael

    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

    November 18, 2014 at 5:27 pm #353091
    koala
    This reply has been marked as private.
    November 19, 2014 at 2:51 am #353441
    Josue

    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

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