Tagged: ,

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • June 28, 2017 at 2:03 am #813662
    June 28, 2017 at 6:25 pm #814055
    Victoria

    Hey public_eye,

    Yo can make a square container and give it a border via css, that way you don’t need to change the image now or for mobile.
    Not sure what you are trying to achieve with the menu. Could you please attach a mockup of what you’re trying to achieve?

    This will center logo for mobile and make a logo look like you need:

    
.responsive #top .logo a {
    height: 200px;
    border: 1px solid #fff;
}
html_header_sidebar .logo img {
    margin-top: 42px;
}
@media only screen and (max-width: 767px) {
  .responsive .logo img {
    margin: 0 auto;

}
.responsive #top .logo {
    width: 100%;
}
}

@media only screen and (max-width: 767px) {
  .responsive .logo img {
    margin: 0 auto;

}
.responsive #top .logo {
    width: 100%;
}
}

    Best regards,
    Victoria

    June 28, 2017 at 11:22 pm #814144
    public_eye

    Hey Victoria,

    Mobile is perfect thank you! … I think there was some confusion re the desktop .. the ‘square’ isn’t what I was wanting it’s getting the logo to sit in the center of that space … (have popped the private link below). I don’t need the actual border. Just the logo to sit centered within that square. The designer is specific about this as all the clients marketing items have a yellow square with the logo centered so she wants the exact same ‘look’.

    One other thing she has asked. I have found some css to remove the ‘flip’ animation from the homepage gallery and the ‘inspiration’ page gallery but now shes asking if we can have the same ‘fade’ in effect like the portfolio images on the portfolio page when it loads? Is this doable with some css as well?

    Much appreciated,
    Hally

    June 29, 2017 at 5:06 am #814202
    John Torvik

    Hi,

    To solve this, just add the following CSS code at Enfold Theme Options > General Styling > Quick CSS

    
.html_header_sidebar .logo img {
  padding-top: 47px !important;
}

.responsive #top .logo a {
  border: none !important;
}

    Best regards,
    John Torvik

    June 29, 2017 at 5:28 am #814211
    public_eye

    Cool thanks that’s fixed the desktop but now affected the logo on the mobile layout?

    June 29, 2017 at 3:08 pm #814515
    Victoria

    Hi public_eye,

    Please remove !important from the code

    
.html_header_sidebar .logo img {
  padding-top: 47px !important;
}

    it will be very hard to adjust it for other screen sizes.
    Remove this code:

    
.responsive #top .logo a {
  border: none !important;
}

    and remove the line for border from the code I gave you

    
.responsive #top .logo a {
    height: 200px;
    this one ---- border: 1px solid #fff;
}

    and then get back to us, we’ll see what else needs to be adjusted.

    Best regards,
    Victoria

    • This reply was modified 7 years, 5 months ago by Victoria.
    June 29, 2017 at 10:41 pm #814723
    public_eye

    Heya Victoria,

    Okay have done that and the only issue now is the logo is appearing really tiny on the mobile layout.

    I was totally happy to not mess with this but the designer is adamant it has to look the way she wants on mobile and desktop :S

    June 30, 2017 at 7:31 am #814832
    Jordan Shannon

    Hi,

    Add the following to enlarge the logo on mobile:

    @media only screen and (max-width: 767px) {
.html_header_sidebar .logo img {
    padding-top: 0px!important;
}
}

    Best regards,
    Jordan Shannon

    June 30, 2017 at 1:07 pm #814943
    public_eye

    Thank you! Perfect.

    Much appreciated.

    June 30, 2017 at 2:54 pm #814976
    Jordan Shannon

    Hi,

    No problem at all. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Sidebar menu & Responsive Issues’ is closed to new replies.