How to apply css to mobile menu bars

newcoder1010 · August 16, 2020

Hello,

<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>
</li>
<li>
<a href="/about_us" data-drupal-link-system-path="node/6">About</a>
</li>
</ul>
</div>

.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!

Clean Sweep · August 19, 2020

Greetings,

If things like this happens, try using font awesome bars .

Makwana Prahlad · August 26, 2020

Quote

for your reference


<!DOCTYPE html>
<html>
<head>
<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">
<style>
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;
}
</style>
</head>
<body>

<!-- 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>
  </div>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
</div>

<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>
</div>

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

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

</body>
</html>

dsonesuk · August 26, 2020

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.

Sign In

How to apply css to mobile menu bars

Recommended Posts

newcoder1010

Link to comment

Share on other sites

Clean Sweep

Link to comment

Share on other sites

Makwana Prahlad

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity