Jump to content

How to apply css to mobile menu bars


Recommended Posts

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!

Link to post
Share on other sites
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>

 

 

Link to post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...