Menu not responding to CSS codes – Conflict?

  • Hello. Can’t seem to figure out why my logo and menu header are so small (see site at https://windhorsestrategic.com). I’ve added the following codes to no avail. All I can think is that there is some conflict in the codes somewhere. Suggestions?

    I’m confounded further because it appears to look correct in admin mode…but when I log out, and go to the site it looks like the screenshot (small logo, tight menu header).

    Additional CSS added as follows:

    .page header.entry-header {
    display: none;
    }

    .page .content-wrapper {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    margin: 0px;
    }

    @media only screen and (min-width:1025px) {

    .site-header .col-md-4 {
    width: 20%;
    }

    .site-header .col-md-8 {
    width: 80%;
    }

    }

    #mainnav li {
    padding: 0 7px;
    }

    #mainnav ul li a {
    font-size: 14px;
    }

    .site-title .logo {
    max-width: 100% !important;
    max-height: 200px !important;
    }

    .navigation-top .wrap {
    max-width: none;
    }

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)

  • Hello there,

    What is the purpose of the code that isn’t responding properly? Probably I could suggest some lines of better code?

    The main reason why CSS affects nothing is invalid code/line. Additional CSS box has its own correction system. Use this tool in case there’re some missed.

    Regards,
    Kharis

    Thread Starter dpkan

    (@dpkan)

    Hi Kharis,

    I’m not actually sure what isn’t responding. Were you able to look at my site? The logo is tiny and the menu header is very small (narrow)…I would like the logo to be bigger and menu header wider. It was previously and can’t figure out what happened to make the logo so small and the header so narrow. When I use Elementor, it looks fine on the screen. However, when I log out of WordPress and look at my site, nothing has seemingly changed.

    to begin with, the CSS class .site-title and therefore also .site-title .logo does not exist in your site;

    you could try .site-logo ….

    please try working with the ‘right-click’ ‘Inspect’ feature of your browser (example Chrome) or similar to investigate the real HTML/CSS structure of your site.

    Hello @dpkan, 

    
.site-title .logo {
   max-width: 100% !important;
   max-height: 200px !important;
}

    This code seems incorrect and I agree with @alchymyth. To correct this, use this one instead. 

    
.site-header .col-md-4 .site-logo {
  max-height: 200px !important;
}

    Regards,
    Kharis

    Thread Starter dpkan

    (@dpkan)

    Michael and Kharis,

    Thanks for your input. Yes, deleting the incorrect code and replacing with the code Kharis provided seems to have corrected the problem now. 200 px is too large so I adjusted accordingly. Thank you so very kindly for support!

    David

    You’re welcome @dpkan!

    Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

    Regards,
    Kharis
    aThemes Support

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Menu not responding to CSS codes – Conflict?’ is closed to new replies.