Jump to content

How to apply css to mobile menu bars


Recommended Posts


<div data-mediasize="992" class="responsive-menus responsive-menus-0-0-0 absolute responsified">
<span class="toggler"></span>
<ul class="responsive-menus-simple" id="rm-removed">
<li class="first">
<a href="/" data-drupal-link-system-path="<front>" class="is-active">Home</a>
<a href="/about_us" data-drupal-link-system-path="node/6">About</a>
.responsive-menus.responsified span.toggler {
    color: #ffffff;

I expected menu bars to be white. When I visit the site on laptop for mobile screen, I see the bars white as expected. However, andriod phone shows dark menu bars. Its been a long time I am dealing with the issue. How can I fix it?

Please advise!

Link to comment
Share on other sites


for your reference

<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
body {
  font-family: Arial, Helvetica, sans-serif;

.mobile-container {
  max-width: 480px;
  margin: auto;
  background-color: #555;
  height: 500px;
  color: white;
  border-radius: 10px;

.topnav {
  overflow: hidden;
  background-color: #333;
  position: relative;

.topnav #myLinks {
  display: none;

.topnav a {
  color: white;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  display: block;

.topnav a.icon {
  background: black;
  display: block;
  position: absolute;
  right: 0;
  top: 0;

.topnav a:hover {
  background-color: #ddd;
  color: black;

.active {
  background-color: #4CAF50;
  color: white;

<!-- Simulate a smartphone / tablet -->
<div class="mobile-container">

<!-- Top Navigation Menu -->
<div class="topnav">
  <a href="#home" class="active">Logo</a>
  <div id="myLinks">
    <a href="#news">News</a>
    <a href="#contact">Contact</a>
    <a href="#about">About</a>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>

<div style="padding-left:16px">
  <h3>Vertical Mobile Navbar</h3>
  <p>This example demonstrates how a navigation menu on a mobile/smart phone could look like.</p>
  <p>Click on the hamburger menu (three bars) in the top right corner, to toggle the menu.</p>

<!-- End smartphone / tablet look -->

function myFunction() {
  var x = document.getElementById("myLinks");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";




Link to comment
Share on other sites

Actually this just might be the case of using a class that does not exist for specific device, for example ".responsified" might not exist on android size, so your css is ignored.

You might be able to pick it up through dev tools, inspect the element, the property color that affects the colour of the bars should be at top, in css panel. Other color properties will be listed below it with strikethrough line. if any of those are black colour, that is likely to be the culprit. check for !important also following that colour.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...