Header overlaps main content & responsive breakpoints

[everbeta]

Hello, I have been tasked with a redesign of a website which is currently using your Dante theme. I would like to stay with the theme if possible, so I purchased my own copy in order to have access to support. I have two initial concerns:

1) the header overlays the slider content causing the top of the image to be cropped. How can I get the slider to align with the bottom of the header bar rather than the top?

2) I noticed when I resize the browser window smaller on a desktop browser, there is a point where the navigation items overlap the logo. Is there a way to adjust the responsive breakpoints to prevent this from happening?

I have a staging site set up and can provide admin logins if necessary, but would prefer to know where within the theme settings these items can be adjusted if possible.

Thanks, Colin

[David Martin – Support]

1) That page is using the Naked Header, change it Standard Header within the page Meta Options.

2) In the Theme Options => Mobile Header Options Change this from Tablet (Portrait) Mobile Header Visibility => Tablet (Landscape) to trigger an earlier breakpoint.

Thanks.

[everbeta]

This reply has been marked as private.

[Kyle – SUPPORT]

Hi

You’ve got a bunch off css that has created the header overlay effect, so was done on purpose? Just remove your custom css

– Kyle

[everbeta]

This reply has been marked as private.

[Kyle – SUPPORT]

Sorry this option is not available on Dante, David took that screenshot from one of our newer themes

– Kyle

[everbeta]

Ok so can you tell me how to adjust the mobile breakpoint in Dante (via CSS or otherwise) so the logo does not overlap the navigation bar on ftc.edu ?

[David Martin – Support]

Hi,

Apologies, the second screenshot was from Atelier – I was on auto pilot mode!

Please use this CSS to reduce the logo dimensions on smaller screens:

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  {
#logo img, #logo img.retina {
    max-width: 60%;
    height: auto!important;
    margin-top: 5px;
}
span.phoneNumber {
    bottom: 15px;
}
}
@media only screen and (min-width: 992px){
#logo img, #logo img.retina {
    max-width: 60%;
    height: auto!important;
    margin-top: 5px;
}
span.phoneNumber {
    bottom: 15px;
}
}