Docs

[Ann]

Hello,

I have used a good bit of CSS code to get the menu to appear how I want, but I’m not sure if I did all the code properly. I’ve noticed that if the screen size is anything smaller on my computer screen than full-size, that the menu becomes very messy and is not responsive.

1) Could you advise how to make the menu responsive and retain the border lines?
2) Is it possible to move the menu position up so that it overlays the top header by half of the menu height?
3) Is it possible to move the main body section, and the slider, up so that it is flush with the top header and slightly behind the menu?

Website URL is: parronhall.marketingofdesign.com

Thank you!

[Rad]

Hi there,

Thanks for writing in.

I checked and there are borderlines on mobile. Are you trying to apply fixed positioning of the mobile menu? Please provide a mockup design of what you’re trying to achieve. It looks okay on my end, not sure which issue you’re currently getting.

Thanks!

[Ann]

Sorry if I wasn’t clear. For that first issue, see the attached screenshot. It happens anytime the window is resized (I do this from time to time on my computer to make sure things are resizing responsively). At the mobile size, I don’t believe the menu is displayed at all in a topbar, just a dropdown, so it isn’t an issue there.

Any ideas on the other questions?

[Ann]

This reply has been marked as private.

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> CSS :

@media (max-width:1360px) and (min-width:979px){

.x-navbar .x-nav-wrap .x-nav > li > a {
    letter-spacing: normal;
}

}

@media (max-width:1137px) and (min-width:1066px){

.x-navbar .desktop .x-nav > li > a {
    font-size: 12px;
}

}
@media (max-width:1066px) and (min-width:999px){

.x-navbar .desktop .x-nav > li > a {
    font-size: 11px;
}

}
@media (max-width:999px) and (min-width:979px){

.x-navbar .desktop .x-nav > li > a {
    font-size: 11px;
}
.x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
    padding-left: 12px;
    padding-right: 12px;
}

}

Hope it helps.

[Ann]

Very nice!! The menu responds very crisply now to all screen sizes.

Any idea how I can get the slider on the right side of the homepage to move up so that it sits flush with the header, and behind the menu?

[Rue Nel]

Hello There,

To move up the slider underneath your menu, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.home .x-flexslider-shortcode-container {
    margin-top: -30px !important;
}

Feel free to adjust to move it up further.

[Author]

Posts