Menu optimiazion during browser window resizing

Hi

when I reduce the window size, the first items of the menu overlap with the image in the background before getting into the dropdown menu. Is it possible the get the dropdown menu before the first menu item (Home) overlaps with the image?, In addition, is it possible to move the dropdown more to the right?

www.cardiomiopatiaipertrofica.info

thanks

Hello there,

Please try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (max-width: 1024px) {
      .site-header .col-md-8 {
        float: right; 
      } 
    }

    @media only screen and (max-width: 767px) {
      .site-header .header-wrap > a {
        position: static;
        display: inline-block;
        margin-left: auto;
        margin-right: auto;
      }
    }

Regards,
Kharis

Hi

it seems it is not working

thank

What device’s screen resolution does that issue appear on? http://whatismyscreenresolution.net/

Regards,
Kharis

hi
the resolution of the screen is

1366x768

Hello there,

Try adding this extra CSS code:

    .site-header .container {
      width: 100% !important;
    }

Regards,
Kharis

hi no changes
there is still overlap of the first menu items with the image when resizing

Do you have a screenshot of it to help me exactly figure that out?

Regards,
Kharis

Hi
please find enclosed a screenshot

Hello there,

Try adding this CSS code:

    @media only screen and (min-width: 1025px) {
      
      .site-header .header-wrap > a img {
        max-width: 330px;
      }
      
      .mainnav ul.menu > li {
        padding-left: 5px;
        padding-right: 5px;
      }
      
    }

    @media only screen and (min-width: 1170px) {
      
      .site-header .header-wrap > a img {
        max-width: 440px;
      }
      
    }  

Regards,
Kharis