Mobile layout/CSS Tewntyfourteen page headers

  • david4040

    (@david4040)


    9 years, 11 months ago

    A child theme has been deployed and we are currently trying to analyze which code to edit within either the parent css file or our child css file which will allow us to eliminate the top right menu/page-bar seen only on the mobile version of our website

    When viewed on a mobile device this tab/top-right-menu-drop-down-sidebar allows a viewer to select any page. The color of this menu box remains as the default theme color of black. We have edited our entire theme to represent a different color yet we cannot find either a setting or the source code necessary to modify the default color towards our custom color.

    Thank you

Viewing 3 replies - 1 through 3 (of 3 total)
  • mrtom414

    (@mrtom414)

    9 years, 11 months ago

    .menu-toggle{background-color:<<yourcolor>>;}

    when you hover
    .menu-toggle:hover{background-color:<<yourcolor>>;}

    Thread Starter david4040

    (@david4040)

    9 years, 10 months ago

    I do not quite understand the context of your response. Should we place this code in our CSS stylesheet with our #color-id ?

    Our main concern is that this menu toggle sidebar shows a black color on mobile device browsers (by default) and this color clearly does not match our themes’ chosen colors.

    This is the code I have since edited into our CSS stylsheet
    .menu-toggle {
    background-color: #ddc58d >;
    }

    .menu-toggle:hover {
    background-color: #ddc58d >;
    }

    I do not see a color change on the mobile browser (Google chrome android)

    CrouchingBruin

    (@crouchingbruin)

    9 years, 10 months ago

    Very close. You just need to take off the greater than sign after the color. You can also combine the rules into one like this:

    .menu-toggle,
.menu-toggle:hover {
   background-color: #ddc58d;
}

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Mobile layout/CSS Tewntyfourteen page headers’ is closed to new replies.