Customizing the Menu (Mobile)

[TIrvine]

Hi, I customized the main menu appearance with some CSS. The problem I’m having is that I can’t get the CSS specific enough (the proper class) to the main navbar. Once the screen hits the mobile sizes, the “become a patient” menu item looks awful. “Resources” looks perfect.

How can I fix my current code (or add new code?) so that “become a patient” box, etc, is the same size as resources? (It’s all messed up when I hover over “become a patient” too)

Thank you so much!

Site is http://sarniamedicalgroup.com/
(password to view site is “temporary”)

Top left image = correct
Bottom left image (mobile) = incorrect. (“become a patient” box is too large, etc, and needs to stay blue, but the same size and padding/centering as “resources”)

[ruenel]

Hello Tina,

Thanks for writing in! The issue is because of your code and the way it was coded.
Please change the padding into padding-bottom: 144px !important; and then place your code in a @media block.

@media(min-width: 980px){
  .x-menu > li.menu-patient{
    background-color:rgb(0,165,231);
    padding-bottom: 144px !important;
    box-shadow:5px 5px 9px rgba(0,0,0,0.4) !important;
  }

  .x-menu > li.menu-patient a:hover{
    background-color:#005aab !important;
    padding-bottom: 144px !important;
    box-shadow:5px 5px 9px rgba(0,0,0,0.4) !important;
  }

  .x-menu > li.menu-patient > .x-anchor .x-anchor-text-primary{
    color:white !important;
    padding-top:40px !important;
  }
}

We would love to know if this has worked for you. Thank you.

[TIrvine]

That’s awesome! Thank you @RueNel! I’d never used a media block before… what are they generally used for?

[jade]

Hi Tina,

These are called media query blocks where you can use if you want to use CSS on specific device or screen width.

You can read more about it here:

• CSS Media Queries - https://goo.gl/L3ZHNg

Hope this helps.