I am having some issues on my website with some CSS I can't get to work.
For some reason on some pages the sticky navigation text remains visible while on others it doesn't. I'm not a developer but would appreciate any tips people might have.
This page it looks correct:
https://ecoheatcool.co.uk/underfloor-heating/
This page is incorrect and you can see as you scroll the links disappear. (White on white)
https://ecoheatcool.co.uk/
I would appreciate any help, Thanks!
If you mean how the text is white on white when you scroll on the homepage, you could add CSS to your custom styling:
.fusion-is-sticky .fusion-main-menu>ul>li>a {
color: rgb(1,62,72);
}
The color is pulled from the background-color of the navbar, but you could change it to any brand color.
Well, upon scrolling, the navbar gets a few classes that give the links a white color. You can just remove these CSS selectors. In this css file remove the color attribute on line 3339 and on 3323. This should fix your problem.
Related
On this page : https://nutreviva.com/peak-health-essentials/ I am trying to fully change the background of the page from white to ivory.
When I try to do this it is only changes to the top half middle sections between the boxes and at the bottom of the page. The sides of the page are still white and this is driving me up the wall.
I have scoured the Inspect in Chrome but nothing seems to be working. When i do, it changes the background for the rest of the pages too zzz
In your custom.css file I'd add the following:
body.page-id-3811 {
background-color: ivory;
}
It seems to work fine, I'm only able to see the colour white background colour in the header and the panels.
In this particular pages HTML try making it say this:
<body style="background-color: ivory;" and see if that is what you are after
Been battling with this for a few days - finally caving in and asking for help.
I'm experiencing a super weird issue in the Edge browser.
Here's the test site: http://edge22.com/test-edge/
When you hover over the menu items, a 1px line appears below the menu item you hovered. There's no border, text-decoration etc.. If the white header area is made black, the line is black etc..
It's like the height of the menu item is reducing by 1px only on hover: http://screencast.com/t/Lpkow3HF0
Now the weird part. This only happens when the element right before the navigation is a link (the "Test" link). If this link is removed, the glitch disappears.
Now if I wrap the link in a div and give it a small margin, the issue goes away:
<div style="margin-bottom:0.1em;">Link</div>
Does anyone have any idea what's going on? I've stripped all of the CSS down to nothing, and can't pinpoint the problem.
I'm not sure if it could fix your problem (as it's not available anymore), but it fixed mine... So for others looking for Edge artefacts that occur on hover ...
I had a somewhat similar issue where a line would appear totally without reason on some elements (and not on other elements using the same style on the same page).
In my case it damaged a menu bar under a fractionally sized image with great repeatability upon hover (and even when not hovering anymore the damage remained).
Simplest solution I found: add a border to the parent in the same color as the background that was damaged ; problem solved.
I'm using dir-pagination found here.
This utilizes bootstrap styling. I can change the rest of the styles for the pagination controls, but I can't force the hover effect to have no color.
I can ensure that it has a color, by specifying one, but if I try to override it in a way that will force it to not have a color such as transparent, it defaults to the white color. My specificity is exactly the same as in the bootstrap css... but even if I remove the style in the bootstrap css is still defaults to white.
Been researching this for hours.
EDIT: See the following plunkr for an example of my problem.
http://plnkr.co/edit/2OvXNgX81NspuO9g356J?p=preview
twilliams Hi there.
Is this what you are trying to do?
Add this to your css.
.pagination li a:hover {
background-color: rgba(255,128,128,.5);
}
This will change the pagination background transparent color when each one is hovered.
Have a look at this Plunker.
I just realized my mistake and I feel foolish. I was making the assumption I had another element below with the color I wanted, and I was simply changing the color of an overlay element.
Turns out I didn't have that other element below, and so it really was just pulling the white of the monitor. I was a little clouded by the complexity of my current project that I didn't see it like I did with the simplicity of the plunkr example I made.
OK, sorry...this is kind of a basic CSS question but it's driving me crazy. I'm self-taught so I'm sure I am just missing something simple.
Site: http://notes.benadelt.com
The logo image sprite is just a home link...I'm trying to remove that background color that you can see is ruining the transparency of the image:
<a class="ben-logo" href="/"></a>
You can see that CSS gives any links in that section a light background-color, which is being applied to the image sprite as well. I'm trying to remove that background color from my image, but not from the body links, and cannot figure it out. Using dev tools I can only impact the style using:
header .words a { background: none; }
But that obviously removes the background from ALL links, so it also removes my image background in the sprite.
Figured there would be something I could add after the background URL to do this, such as:
background: url(http://www.benadelt.com/notes/wp-content/uploads/2013/04/Ben-Logo-Sprite.svg) none;
When you hover, it looks like I want it to look normally without that darn background-color.
Any help would be appreciated!
Ben
header .words a.ben-logo { background-color: transparent; }
The above code will target only the logo link. By setting the background colour to transparent, you leave the image itself (and all the other background properties!) intact.
Edit: One thing - I believe you already have transparent set on that background image by virtue of not specifying a colour (transparent is the default). What is probably happening in your case is that the a.ben-logo declaration comes before the .words a declaration in your stylesheet, so it's being overridden. The reason the above code should fix it is because the extra class names add more specificity. Here is Andy Clarke's specificity cheat sheet for you to peruse: http://www.stuffandnonsense.co.uk/archives/images/specificitywars-05v2.jpg
I'm using a text widget, Black Studio TinyMCE, in WordPress. For some reason, I cannot get the background color to match the background of the header (#192E82). Currently, the header looks like this -- as you can see, there's a white outline surrounding the text area:
And when I Firebug the selection, Firebug shows this:
I can add whatever custom CSS I'd like to. But I'm not sure how to do so. I'm unsure which class I should use a # before, if any, or which class I should use a . before. Ultimately, I'd like to make that white area around the edge to match the background color of the header.
For instance, this doesn't work -- in fact, nothing I've tried works!
#widget-wrap .textwidget {
background-color:#192E82;
}
Does anybody know how I can accomplish getting the white to match the header background? Any guidance would be appreciated!
EDIT: Here's a Fiddle of everything I could find:
http://jsfiddle.net/jasonpaulweber/nvkVT/
Hard to give a precise answer with only the info included, but I would inspect one element at a time, from the <strong> and upwards in the hierarchy, and look for an element with either a white background-color and a padding, or a thick white border. If you do that I'm sure you'll spot it. Once you've identified it just let me know and I'll try and help you targeting it with a CSS selector.
According to the fiddle, the white space is padding of the header-right element
You should set
#header-right {
background-color:#192E82;
}