i have this html
<html lang="en">
<head>
<style>.wf-force-outline-none[tabindex="-1"]:focus{
outline:none;
}
</style>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>SUSBOOKS</title>
<link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', filename='apple-touch-icon.png') }}">
<link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', filename='favicon-32x32.png') }}">
<link rel="icon" type="image/png" sizes="16x16" href="{{ url_for('static', filename='favicon-16x16.png') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='mdb.dark.min.css') }}" />
<link rel="stylesheet" href="{{ url_for('static', filename='all.min.css') }}" />
<link href="https://uploads-ssl.webflow.com/63b8e36b0f5b782ef248d8ab/css/das-dynamite-site-5ede7b.webflow.54c285831.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" type="text/javascript">
</script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Merriweather:300,300italic,400,400italic,700,700italic,900,900italic" media="all">
<script type="text/javascript">WebFont.load({
google: {
families: ["Merriweather:300,300italic,400,400italic,700,700italic,900,900italic"] }
}
);
</script>
<!--[if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js" type="text/javascript"></script><![endif]-->
<script type="text/javascript">!function(o,c){
var n=c.documentElement,t=" w-mod-";
n.className =t "js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className =t "touch")}
(window,document);
</script>
<link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', filename='apple-touch-icon.png') }}">
<link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', filename='favicon-32x32.png') }}">
<link rel="icon" type="image/png" sizes="16x16" href="{{ url_for('static', filename='favicon-16x16.png') }}">
<style>
@font-face{
font-family: 'Circular';
font-weight: 400;
src: url(chrome-extension://pefhciejnkgdgoahgfeklebcbpmhnhhd/font/Circular-Pro-Black-Regular.eot);
src: url(chrome-extension://pefhciejnkgdgoahgfeklebcbpmhnhhd/font/Circular-Pro-Black-Regular.eot?#iefix) format('embedded-opentype'),
url(chrome-extension://pefhciejnkgdgoahgfeklebcbpmhnhhd/font/Circular-Pro-Black-Regular.woff2) format('woff2'),
url(chrome-extension://pefhciejnkgdgoahgfeklebcbpmhnhhd/font/Circular-Pro-Black-Regular.woff) format('woff'),
url(chrome-extension://pefhciejnkgdgoahgfeklebcbpmhnhhd/font/Circular-Pro-Black-Regular.ttf) format('truetype'),
url(chrome-extension://pefhciejnkgdgoahgfeklebcbpmhnhhd/font/Circular-Pro-Black-Regular.svg) format('svg');
}
@font-face{
font-family: 'Circular';
font-weight: 700;
src: url(chrome-extension://pefhciejnkgdgoahgfeklebcbpmhnhhd/font/Circular-Pro-Black-Bold.eot);
src: url(chrome-extension://pefhciejnkgdgoahgfeklebcbpmhnhhd/font/Circular-Pro-Black-Bold.eot?#iefix) format('embedded-opentype'),
url(chrome-extension://pefhciejnkgdgoahgfeklebcbpmhnhhd/font/Circular-Pro-Black-Bold.woff2) format('woff2'),
url(chrome-extension://pefhciejnkgdgoahgfeklebcbpmhnhhd/font/Circular-Pro-Black-Bold.woff) format('woff'),
url(chrome-extension://pefhciejnkgdgoahgfeklebcbpmhnhhd/font/Circular-Pro-Black-Bold.ttf) format('truetype'),
url(chrome-extension://pefhciejnkgdgoahgfeklebcbpmhnhhd/font/Circular-Pro-Black-Bold.svg) format('svg');
}
body {
background-color:#000000 ;
}
.tab {
display: inline-block;
margin-left: 40px;
}
.wrapper {
width: 100%;
max-width: 31.25rem;
margin: 6rem auto;
padding: 15px;
}
.label {
font-size: .625rem;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 1.3px;
margin-bottom: 1rem;
}
.btn-primary {
color: var(--button-color);
background-color: var(--button-background-color);
border-radius: var(--border-radius);
}
.btn-primary:hover {
box-shadow: inset 0 0 0 20rem var(--darken-1);
}
.btn-primary:active {
box-shadow: inset 0 0 0 20rem var(--darken-2),
inset 0 3px 4px 0 var(--darken-3),
0 0 1px var(--darken-2);
}
.btn-primary:disabled,
.btn-primary.is-disabled {
opacity: .5;
}
</style>
</head>
<body >
<div >
<div data-animation="default" data-collapse="medium" data-duration="400" data-easing="ease" data-easing2="ease" role="banner" >
<div >
<div id="Navbar" >
<a href="#" >
<img src="https://uploads-ssl.webflow.com/63b8e36b0f5b782ef248d8ab/63b8e451944baf4700888a87_susbooks.png" loading="lazy" sizes="(max-width: 479px) 63vw, 225px" width="225" srcset="https://uploads-ssl.webflow.com/63b8e36b0f5b782ef248d8ab/63b8e451944baf4700888a87_susbooks-p-500.png 500w, https://uploads-ssl.webflow.com/63b8e36b0f5b782ef248d8ab/63b8e451944baf4700888a87_susbooks-p-800.png 800w, https://uploads-ssl.webflow.com/63b8e36b0f5b782ef248d8ab/63b8e451944baf4700888a87_susbooks.png 1085w" alt="">
</a>
<nav role="navigation" >
<ul role="list" >
<li>
<a href="/" aria-current="page" >
<span >Home
</span>
</a>
</li>
<li >
<div data-hover="true" data-delay="0" >
<div id="w-dropdown-toggle-0" aria-controls="w-dropdown-list-0" aria-haspopup="menu" aria-expanded="false" role="button" tabindex="0">
<div aria-hidden="true">
</div>
<div >
<span >Genres
</span>
</div>
</div>
<nav id="w-dropdown-list-0" aria-labelledby="w-dropdown-toggle-0">
<a href="/drama" tabindex="0">
<span >Drama
</span>
</a>
<a href="/fantasy" tabindex="0">
<span >Fantasy
</span>
</a>
<a href="/mystery" tabindex="0">
<span >Mystery
</span>
</a>
<a href="/comedy" tabindex="0">
<span >Comedy
</span>
</a>
<a href="/adventure" tabindex="0">
<span >Adventure
</span>
</a>
<a href="/action" tabindex="0">
<span >Action
</span>
</a>
<a href="/teen" tabindex="0">
<span >Teen
</span>
</a>
<a href="/romance" tabindex="0">
<span >Romance
</span>
</a>
</nav>
</div>
</li>
<li>
<div >
</div>
</li>
<li >
<a href="/search" ><span >Search
</span>
</a>
</li>
</ul>
</nav>
<div style="-webkit-user-select: text;" aria-label="menu" role="button" tabindex="0" aria-controls="w-nav-overlay-0" aria-haspopup="menu" aria-expanded="false">
<div >
</div>
</div>
</div>
</div>
<div data-wf-ignore="" id="w-nav-overlay-0">
</div>
</div>
</div>
<div style="text-align: center;">
<h2 style="text-align: center;">
<span style="color: #ffffff;">Popular Books
</span>
</h2>
</div>
<div style="text-align: center;">
<div >
{% for item in data %}
<div >
<div style="border-radius:20px;" >
<a href="api/default?query={{item.name}}" names="{{ item.name }}" >
<img style="border-radius:20px;" names="{{ name }}" src={{item.cover}} alt="{{ name }}" width="1500px" height="2250px" one rror="this.onerror=null; this.src='../static/default.png'" />
</a>
</div>
</div>
{% endfor %}
</div>
</div>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5812513324418518"
crossorigin="anonymous">
</script>
<!-- lower banner -->
<ins
style="display:block"
data-ad-client="ca-pub-5812513324418518"
data-ad-slot="1770889507"
data-ad-format="auto"
data-full-width-responsive="true">
</ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({
}
);
</script>
<script data-name="BMC-Widget" data-cfasync="false" src="https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js" data-id="SUSTEAM" data-description="Support me on Buy me a coffee!" data-message="Thanks for all the support !!" data-color="#5F7FFF" data-position="Right" data-x_margin="18" data-y_margin="18">
</script>
<script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=63b8e36b0f5b782ef248d8ab" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous">
</script>
<script src="https://uploads-ssl.webflow.com/63b8e36b0f5b782ef248d8ab/js/webflow.efb10e0b9.js" type="text/javascript">
</script>
<!--[if lte IE 9]><script src="//cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script><![endif]-->
</body>
<footer style="margin-top: 200px;" >
<div style="background-color:#000000">
<p style="color: white">SusBooks.com
</p>
<p style="color: white">Powered by
<img src="{{ url_for('static', filename='vexer.png') }}" style="width: 150px">
</p>
</div>
</footer>
<div id="ed73d0f4-3465-4dc6-87a9-e49c622764bb" style="display: block !important; z-index: 2147483647 !important;">
</div>
</html>
and my nav bar is correct in browser, white text and black background, but on mobile the navbar background goes to white and the text stays white. How would i go about changing the mobile nav bar background to match the desktop nav bar. I have tried for hours and still cant figure out how to change the background for mobile nav bar.
CodePudding user response：
I can't see why you are getting this error. As you have no @media screen and (min-width) and only one main color changed
body {
background-color:#000000 ;
}
So the only thing I can offer (As I have run this code and it stays black) if that's what you want then it's working.
Add:
body {
color: #fff;
}
Color is for the Text, it will only work for text :).
If you are testing on your own phone, You may want to test in Incognito OR delete your history for the website (Only) keep your passwords etc and try again. Dossn't always update.
You can also try this for when it's messing up:
@media screen and (min-width 1000px)
change the 1000px to the point where it's not working and change the color to the one you want. Or anything for that matter.
Hope this helps! :)
CodePudding user response：
A lot of information seems to be missing from your question.
Where are the CSS variables defined?
Are some of the scripts (javascripts) interfering with style?
This does not seem to be HTML, but some templating language (maybe Handlebars) since is contains a for-loop
{% for items in data %}and also a{{name}}refrence?Have you checked if your browsers has the same color scheme setting? I suspect one is in dark-mode and one is in light-mode.
To color an element in CSS you simply select the element either by className or by id, then you apply background-color: black.
in your case I believe you can use
.navbar-logo-left-container.shadow-three {
background-color: black;
}
Else you can use
.navbar-logo-left-container {
background-color: black !important;
}
You need to include the !important since a lot of styling made for that element are overwritten later.
I cannot help you more without further information.
Note: I tried to run in browser (chrome-based) and the navbar was black.
CodePudding user response：
solved it by adding
.nav-menu-two {
background-color: black !important;
}
with help from cosby