I need to change the background color of the dropdown menu on my website:
https://institutoschuman.org/
I supposed it was very easy but I'm not able to do it. I've Checked the code of my style.css but I haven't found the lines that determine the color of the dropdown menu. Any suggestion?
You can update your style.css with the CSS below and change your background colour from white (#fff) to one you prefer, that should do it.
#media screen and (max-width: 960px) and (min-width: 0px) {
.respMenu {
background: #fff;
}
.respMenu a {
background: #fff;
}
}
The solution:
.menu ul.sub-menu, .menu ul.children {
margin-top: 65px;
}
.sub-menu > li {
background: white !important;
}
.sub-menu > li:hover {
background: #fcfcf4 !important;
}
.sub-menu > li > a {
color: black !important;
}
.sub-menu > li > a:hover {
color: #008ddb !important;
}
Related
I'm brand new to CSS so please forgive me if I'm missing something obvious. I've spent several hours on this and searched this website and have not been able to resolve my issue.
I have a Shiny (R) app that I am trying to add some custom styling to using CSS. I have been making change to the Navbar, which I am happy with so far. However, something in my CSS is causing undesirable behavior in mobile-sized screens, where the tabs of the navbar do not stack vertically and overlap with the main content:
Compared to the default, which is what I would like:
I know this is something related to my CSS because when I disable it this issue is resolved. I have tried many things and nothing so far has helped, I was wondering if someone might be able to point out in my CSS where I have introduced this problem and how I might resolve it.
Thanks in advance. CSS:
/*=============NAVBAR STYLING=============*/
/*Entire navbar*/
.navbar.navbar-default.navbar-static-top{
background-color:white;
height:60px;
/*margin: 10px;*/
margin:0px;
}
/*All navbar tabs*/
.navbar-default .navbar-nav>li>a {
/*Sets consistent height for navbar tabs, must be !important*/
height:60px !important;
justify-content:center;
align-items:center;
display:flex;
}
/*Style the *active* navbar tab*/
.navbar-default .navbar-nav>.active>a{
/*Make the active tab darker in color w/ white text*/
background-color:#676767!important;
color:white!important;
border-radius: 10% / 50%;
}
.nav-link {
position:absolute;
}
/*======Screen-width specific styling=======*/
#media (min-width:1276), (max-width: 1426px) {
.navbar.navbar-default .navbar-nav > li > a {
font-size: 12px;
}
h2 {
font-size:26px;
}
.hometext {
font-size: 18px !important;
}
ol {
font-size: 18px !important;
}
}
#media only screen and (min-width:768px) and (max-width:1275px) {
.navbar.navbar-default .navbar-nav > li > a {
font-size: 11px !important;
margin-top:10px !important;
}
h2 {
font-size:24px;
}
.hometext {
font-size: 16px !important;
}
ol {
font-size: 16px !important;
}
}
/* Next two classes keeps the navbar tabs on the same line in smaller windows */
.min-width{
overflow-x:auto
}
ul.nav{
display:inline-flex
}
}
#media only screen and (min-width:1px) and (max-width:767px) {
.navbar-default .navbar-collapse > li{
display: block!important;
}
.navbar-default .navbar-collapse > li > a {
float: none!important;
/*Removes grey line above tabs (overlaps with logo)*/
.navbar-default .navbar-collapse{
border-color:transparent;
}
}
I wish to change all the elements in the mini cart element to the same background colour for [www.wizardmodels.ltd][1] to #800000
Current it is a mixed with #710000
However, I cannot find the right CSS to change all the elements.
E.g.
#media screen and (min-width: 768px) {
.site-header-cart .widget_shopping_cart, .main-navigation ul.menu ul.sub-
menu, .main-navigation ul.nav-menu ul.children {
background-color: #800000;
}
}
OR
.widget .woocommerce .widget_shopping_cart {
background-color: #800000 !important;
}
OR BOTH
Always leave the bottom portion (with Sub-total) in the desired #80000 AND the middle portion in the mysterious #710000.
I can change it in the Google console. Looking at the page source the colour appears in the code:
.site-header-cart .widget_shopping_cart,
.main-navigation ul.menu ul.sub-menu,
.main-navigation ul.nav-menu ul.children {
background-color: #710000;
}
Changing that does not work either.
Any ideas, please?
ps, no need to buy anything :)
PART 2
I have added a screen shot. The code that provides this is
.site-header-cart .widget_shopping_cart p {
background-color: #800000 !important;
}
.widget_shopping_cart .buttons, .widget_shopping_cart .total {
background-color: #800000 !important;
}
Have got no further. Also clearing cache. The work is done on a local server.
TOP PART
li.woocommerce-mini-cart-item.mini_cart_item {
background-color: #800000 !important;
}
BOTTOM PART
header-cart .widget_shopping_cart .buttons, .site-header-cart .widget_shopping_cart .total {
background-color: #710000 !important;
}
So I take it that you want the entire drop-down "mini-cart" background color to be the same (#800000)? If so you just need to change add this.
.widget_shopping_cart p.total {
background: #800000;
}
Hope that helps. Let me know if I misunderstood your issue.
I searched for the hex codes of the two colours in the wpdb. And found the following in options. I then edited out the two colours I did not want. The code below works. I suspect the options were overriding the suggested CSS (above)?
#media screen and ( min-width: 768px ) {
.secondary-navigation ul.menu a:hover {
color: #ffffff;
}
.secondary-navigation ul.menu a {
color: #ffffff;
}
.site-header-cart .widget_shopping_cart,
.main-navigation ul.menu ul.sub-menu,
.main-navigation ul.nav-menu ul.children {
background-color: #800000;
}
.site-header-cart .widget_shopping_cart .buttons,
.site-header-cart .widget_shopping_cart .total {
background-color: #800000;
}
.site-header {
border-bottom-color: #800000;
}
I can only assume that these crept in somewhere during the build, they are colours I would have tried. I have used a 3rd part plugin which suggested it could provide easy modification of the theme. Was this the culprit, even after uninistalling!
I am using foundation and need to change default background color, font color and color on hover. I have tried something like this but it is not working for me:
My css file:
.tabs {
background-color: #353A41;
border: 0;
}
.tabs a{
color: #FFFFFF;
}
.tabs :hover{
background-color: #2A2E34;
}
This is not valid:
.tabs :hover {
background-color: #2A2E34;
}
Try this instead:
.tabs a:hover {
background-color: #2A2E34;
}
Try adding this to your custom CSS:
.tabs a{
background: colorname;
color: colorname;
}
.tabs-title > a:focus, .tabs-title > a[aria-selected='true'] {
background: colorname;
color: colorname;
}
I'm building this site www.shapeinthecity2.unicornrobots.com and I have a transparent floating header menu with white text on the homepage.
However, the text gets hidden as you scroll down. Is there a way to change the text color to black after you scroll past a certain point?
Below is the CSS script I've added so far,
Thanks
/*--- Menu Spacing & Color ---*/
.home #header-right-menu li a {
color: #ffffff;
}
.home #header-right-menu ul ul a {
color: #cccccc;
}
#header-right-menu ul ul a:hover {
color: #ffffff;
}
.top-navigation a, #header-right-menu a {
color: #000000;
margin-right: 80px;
}
#header-right-menu li a:hover {
color: #ff6600;
}
.top-navigation a, #header-right-menu ul ul a {
background: #000000;
}
.site-logo img {
margin-left: 80px;
}
.home.transparent-header .site-header {
position: fixed;
top:50px;
}
/*--- Menu Spacing & Color End ---*/
Hey I am not able to see your floating header, may be your script not working. As your site have one error. Check your source.
your code is visible on the site:
$('#whitediv').waypoint(function() {
alert('Change your background color of div');
$('.navbar').css('background-color', '#000000');
}, {
offset: '5%'
});
This code is visible. Please check and correct. Then we can check it properly. Thanks.
I am using the following media query in my bootstrap app.
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
.nav li { width: 100%;
}
.nav .dropdown ul {display:none; }
.nav .open ul { display: block; }
.nav-collapse .nav > li > a, .nav-collapse .dropdown-menu a {
text-align: center;
background-color:#211256;
}
.nav-collapse .nav > li > a:hover,
.nav-collapse .dropdown-menu a:hover {
background-color: #211256;
color:white;
}
.navbar .nav > li a:hover{
color:white;
}
.navbar .nav .active > a, .navbar .nav .active > a:hover {
background: #211256;
color: white;
text-decoration: none;
}
.nav-collapse .nav > li > a, .nav-collapse .dropdown-menu a {
border-radius: 3px 3px 3px 3px;
color: white;
font-weight: bold;
padding: 6px 15px;
margin-bottom:2px;
}
.navbar .nav li.dropdown .dropdown-toggle .caret, .navbar .nav li.dropdown.open .caret {
border-bottom-color: white;
border-top-color: white;
}
.navbar .nav li.dropdown.open > .dropdown-toggle, .navbar .nav li.dropdown.active > .dropdown-toggle, .navbar .nav li.dropdown.open.active > .dropdown-toggle {
background-color: transparent;
color: #211256;
}
.accordion-inner {
border-top: 1px solid #E5E5E5;
padding: 9px 15px;
}
}
When viewing the page in landscape mode
http://46.32.253.11/
the dropdown navbar is open by default and I cant see the bootstrap button, I use exactly the same media query for max-width 979px and the button appears and is closed.
Can anyone advise what selector i need to target to have the ipad show the bootstrap button and hide the dropdown menu until the button is pressed.
Any help appreciated
That would require some JavaScript and I'm going to recommend jQuery for sake of simplicity.
Essentially, you're going to listen for the orientationchange event in JavaScript and then, based on the orientation, invoke a function that will handle the toggle.
$(document).ready(function() {
window.onorientationchange = function() {
var orientation = window.orientation;
switch(orientation) {
case 0: // portrait
break;
case 90: // landscape left
toggler();
break;
case -90: // landscape right
toggler();
break;
}
}
function toggler() {
var toggled = false;
$('.dropdown-toggle').on('click', function() {
if (toggled === false) {
$('.nav .open ul').hide();
$('.nav .dropdown ul').show();
toggled = true;
} else {
$('.nav .dropdown ul').hide();
$('.nav .open ul').show();
toggled = false;
}
});
}
});
Try this out and see if it gets you started in the right direction (pun intended).