Celebrating 7 Years! Get up to $30 off GeneratePress Premium!

[Resolved] Responsive menu

Home Forums Support [Resolved] Responsive menu

Home Forums Support Responsive menu

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #534064
    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

    #534268
    Leo
    Staff
    Customer Support

    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 πŸ™‚

    #534309
    Francesca

    yes of course

    https://francesca.megcorsi.com/

    thank you

    #534510
    Leo
    Staff
    Customer Support
    #537298
    Francesca

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

    #537527
    Tom
    Lead Developer
    Lead Developer

    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?

    #538318
    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

    #538777
    Leo
    Staff
    Customer Support

    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 */

    #538974
    Francesca

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

    #539275
    Tom
    Lead Developer
    Lead Developer

    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?

    #539465
    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.

    #539950
    Tom
    Lead Developer
    Lead Developer

    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 πŸ™‚

    #540171
    Francesca

    Now it works on tablet. Thank you very much for the support. πŸ™‚

    #540402
    Tom
    Lead Developer
    Lead Developer

    Awesome! You’re welcome πŸ™‚

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