Mobile sub-menu color and background color

Home Forums Moesia Pro Mobile sub-menu color and background color

This topic contains 5 replies, has 3 voices, and was last updated by  jenrock 2 weeks, 3 days ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #14989

    01labs
    Participant

    Is there a way to change the sub-menu color when viewed on mobile devices? Currently on mobile devices, the nav is open and the sub-menu color is a medium gray. Unfortunately, my main header background is a red similar in value to the sub-menu which makes it difficult to view.

    I tried to modify the sub-menu color in the color settings, but did not find any for the sub-menu in particular. Can I add a custom css for the sub-menu just for viewing on mobile?

    Any help is greatly appreciated!

    #14990

    01labs
    Participant

    Sorry, I forgot to include the url:
    http://www.autobodydetailservice.com/

    Thanks!

    #15006

    Vlad
    Keymaster

    You can use this:

    
    @media (max-width: 991px) {
      .main-navigation ul ul a {
       color: #c8c8c8;
      }
    }
    
    #15024

    01labs
    Participant

    Thanks Vlad! Can you tell me now to change the sub-menu background color on desktop viewing? The #fff color on mobile matches the menu color and think it would be good to keep consistent on both desktop and mobile. I will change the sub-menu background color to #000.

    Thanks!

    #15027

    01labs
    Participant

    Actually please disregard my last post. The current look on desktop looks great and the mobile viewing if fine! Thanks Vlad for all your support on the theme!

    #1038471

    jenrock
    Participant

    Hi,I could use some help please.
    I tried the above code and it didn’t work for me. I currently have the code below,( found elsewhere on this forum) But my sub menus do not highlight and the background colour remains dark blue. Thanks

    @media only screen and (max-width:1024px){
    .site-header,
    #mainnav-mobi {
    background-color: #4c4c4c !important;
    }

    #mainnav-mobi ul > li > a:hover{
    color: #a84412;
    }

    .site-header.float-header .col-md-4 {
    opacity: 0;
    }

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

You must be logged in to reply to this topic.