Mobile Device View vs. Webpage view

• 

  krochel · Member · Feb 1, 2017 at 5:23 am

  • Copy link
  • Add topic to favorites

  I would like to know if the sub menu hover color on a mobile phone can be set to a different color than the hover color when viewing the web page on a laptop/computer.

  The blog I need help with is: (visible only to logged in users)

• 

  nizamilputra · Member · Feb 1, 2017 at 5:54 am

  • Copy link

  Hi krochel,

  Sure, you can use this css.

  @media screen and (max-width: 768px){
    .submenu{
      background-color: #ff5474 !important;
    }
  }

  Let me know if you need another help.

• 

  staff-loquaciousloon · Staff · Feb 1, 2017 at 3:20 pm

  • Copy link

  Hi there!

  I wanted to add a quick heads up about !important – while it can help you make a quick change, it should really be avoided at all costs (meaning you’ll virtually never want to actually use it).

  The reason for this is that !important overrides any CSS that came before it – disrupting the flow of your styles and making it more difficult to style around other rules.

  A better approach would be to target a specific element. In the case of Custom CSS, this usually means using your browser tools to identify the style that is setting the attribute you want to change.

  For a different color background on mobile submenus, I’d recommend using this :)

  @media screen and (max-width: 768px) {
      .main-navigation ul ul {
          background-color: #ff5474;
      }
  }

• 

  nizamilputra · Member · Feb 2, 2017 at 12:01 am

  • Copy link

  Yes, you are absolutely right staff-loquaciousloon! Will keep it mind about that. Thank you for remind me!

• 

  krochel · Member · Feb 2, 2017 at 2:11 am

  • Copy link

  do you guys know how to lineup the sub menu items with the bullet points in the mobile view? or maybe eliminate the bullet points all together in the mobile view…

• 

  nizamilputra · Member · Feb 2, 2017 at 3:30 am

  • Copy link

  Yes, you can use this css:

  .main-navigation ul ul{
    list-style: none;
  }

• 

  staff-loquaciousloon · Staff · Feb 2, 2017 at 1:52 pm

  • Copy link

  No problem! @nizamilputra :)

  Regarding the bullets, I noticed them yesterday as well and I’ve already filed a bug report, so that should be addressed in the future :)

  In the meantime, the CSS you’ve used above looks like a perfect solution to me!