[Resolved] Responsive menu

[Francesca]

hi, I have a problem with the menu in the responsive part. The menu ends up under the cover image and does not work. Can you help me make sure that you see? Thank you

[Leo]

Hi there,

Can you link me to the site in question?

You can edit the original topic and use the private URL field.

Let me know 🙂

[Francesca]

yes of course

https://francesca.megcorsi.com/

thank you

[Leo]

Can you try using the full width page builder container?
https://docs.generatepress.com/article/page-builder-container/

[Francesca]

unfortunately it does not work. Could you kindly create a code for a responsive menu that works on tablets and smartphones? thank you

[Tom]

You seem to have quite a bit of custom CSS for the menu, which is causing the issue.

Can you try commenting out that CSS to see if it becomes responsive again?

[Francesca]

yes of course

this is my code

.main-navigation .main-nav ul li a {
position: relative;
right: 227px;
top: -56px;
}

.alignnone.size-medium.wp-image-867 {
position: relative;
top: 30px;
}

.alignnone.size-medium.wp-image-868 {
top: 30px;
position: relative;
}

.alignnone.size-medium.wp-image-869 {
position: relative;
top: 30px;
}

#masthead.site-header {
margin-top: -25px;
height: 140px;
}

.entry-title {
display: none;
}

.apss-theme-3 .apss-single-icon a:hover .apss-social-text {
display: none;
}

.apss-social-share.apss-theme-3.clearfix {
display: none;
}

#menu-menu-footer.menu {
margin-left: 100px;
color: #e9e4e4!important;
font-size: 19px;
margin-top: -12px;
}

#quform_1_10_60afe1.quform-field.quform-field-email.quform-field-1_10 {
width: 160px;
height: 50px;
margin-top: 10px;
}

.quform-element.quform-element-row.quform-element-row-1_7.quform-2-columns.quform-element-row-size-fixed.quform-responsive-columns-phone-landscape {
margin-top: -9px;
}

.quform-element.quform-element-column.quform-element-1_8 {
margin-top: 12px;
}

#quform_1_10_fbe9b0.quform-field.quform-field-email.quform-field-1_10 {
height: 50px;
}

.quform .quform-field-captcha,
.quform .quform-field-date,
.quform .quform-field-email,
.quform .quform-field-file,
.quform .quform-field-multiselect,
.quform .quform-field-password,
.quform .quform-field-select,
.quform .quform-field-text,
.quform .quform-field-textarea,
.quform .quform-field-time,
.quform .select2-container–quform .select2-selection {
margin: 0;
min-width: 10px;
max-width: 100%;
width: 100%;
padding: 8px;
height: 50px;
line-height: 1.5;
font-size: 1em;
border: 1px solid #e3e3e3;
}

.quform-3 .quform-field-3_7 {
border-color: #d20a0a;
color: #434343;
border-radius: 6px;
font-family: open sans;
font-size: 12px;
font-weight: bold;
border-width: 2px;
}

.quform-3 .quform-field-3_8 {
border-color: #d20a0a;
color: #434343;
border-radius: 6px;
font-family: open sans;
font-size: 12px;
font-weight: bold;
border-width: 2px;
}

.quform-3 .quform-field-3_10 {
border-color: #d20a0a;
color: #434343;
border-radius: 6px;
font-family: open sans;
font-size: 12px;
font-weight: bold;
border-width: 2px;
}

.quform-3 .quform-field-3_11 {
border-color: #d20a0a;
color: #434343;
border-radius: 6px;
font-family: open sans;
font-size: 12px!important;
font-weight: bold;
border-width: 2px;
height: 200px;
}

#menu-menu-footer.menu {
margin-left: 100px;
font-size: 15px;
margin-top: -12px;
}

a.button,
a.button:visited {
color: #ffffff;
background-color: #d20a0a;
border-radius: 6px;
font-family: montserrat;
font-weight: 600;
border-width: 2px;
border-color: #d20a0a;
}

button:hover,
html input[type=”button”]:hover,
input[type=”reset”]:hover,
input[type=”submit”]:hover,
a.button:hover,
button:focus,
html input[type=”button”]:focus,
input[type=”reset”]:focus,
input[type=”submit”]:focus,
a.button:focus {
color: #d20a0a;
background-color: #ffffff;
border-width: 2px;
border-color: #d20a0a;
}

.image.wp-image-934.attachment-full.size-full {
margin-top: -5px;
}

.footer-widget-3.grid-parent.grid-33.tablet-grid-50.mobile-grid-100 {
margin-top: -15px;
}

.nec-show {
color: #fff;
font-weight: bold;
padding: 8px;
font-family: montserrat;
display: block;
text-align: center;
border-radius: 2px;
margin-top: 20px;
text-decoration: none!important;
}

.mobmenu [class^=”mob-icon-“]:before,
.mobmenu [class*=” mob-icon-“]:before {
margin-top: 55px;
font-size: 25px;
margin-right: 20px;
}

#mobile-header .menu-toggle {
display: none;
}

.elementor-818 .elementor-element.elementor-element-05c662a > .elementor-container {
position: relative;
}

.elementor-element.elementor-element-6e5fa47.elementor-section-stretched.elementor-section-boxed.elementor-section-height-default.elementor-section-height-default.elementor-reverse-mobile.elementor-section.elementor-top-section {
height: 130px;
}
.generate-columns .inside-article {
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin-top: 70px;
}
.inside-article a, .inside-article a:visited, .paging-navigation a, .paging-navigation a:visited, .comments-area a, .comments-area a:visited, .page-header a, .page-header a:visited {
color: #d20a0a;
background-color: #ffffff;
}
.nec-show:hover {
color:#ffffff;
background: #d20a0a;
}

alternatively it would also be good if you could hide the gp header and replace it with this created with elementor

[elementor-template id=”1864”]

thank you very much

[Leo]

What Tom meant was to comment out the CSS like this to see if the custom CSS is causing the issue:
/* CSS here won't work */

[Francesca]

yes, I’ve tried it too but it does not work the same

[Tom]

This is the problem CSS you have:

.main-navigation .main-nav ul li a {
    position: relative;
    right: 227px;
    top: -56px;
}

What happens when you remove it?

[Francesca]

If I remove it, the menu goes very high and I only see the underline. But I think the problem is the social icon widget at the bottom of the header on the right, so I had to set that code. Perhaps removing that would fix the problem.

[Tom]

Let’s try this.

1. Remove that CSS I mentioned, and add this:

.inside-header {
    display: flex;
    align-items: center;
}

.site-logo {
    order: 1;
}

.inside-header .main-navigation {
    order: 2;
}

.header-widget {
    order: 3;
}

You can run it through this if you need old browser support: https://autoprefixer.github.io/

2. Remove the negative margin-top from your first Elementor section. Also remove any other negative margin you added.

3. Use the Disable Elements metabox to disable the content title.

4. Use the Page Builder Container metabox to set the container to full width.

That should give you the layout you’re looking for 🙂

[Francesca]

Now it works on tablet. Thank you very much for the support. 🙂

[Tom]

Awesome! You’re welcome 🙂

[Author]

Posts