When I go to my website in a new tab, the navigation bar height is double the size it should be. Then, if I refresh, it looks good.
Any idea how to fix it?
My website is www.preciseos.com, when you go there, please check out the top white navigation bar and refresh. You will see the issue.
Oz
The problem comes from the element <div class="social-icons hover-big pull-right"> and more specifically from these two CSS classes :
.social-icons {
display: table
}
and
.pull-right {
float: right
}
In Chrome DevTools, I can replicate the bug if I disable both classes, and then apply the classes social-icons and pull-right in this specific order.
If you make sure that the float: right rule (i.e. the class pull-right) is applied before the display: table rule, it should be ok.
You have a problem with jquery-1.10.2.min.map. It has a 300 status, it isn't found on the server. Check this, and then it will be ok.
Related
https://www.insure.report/en
I need to fix the Updates widget to have a top margin so it isn't covered by the header OR I need the widget to load on top of the header, not behind it.
Then I need to hide the 'Submit an idea' link.
I'm still new to CSS and the Submit link uses several classes so I don't know which to set to display none.
Any help or guidance is appreciated.
Without seeing your html and css it's hard to be absolutely positive but I gave the id frill in dev tools a property and value margin-top: 20px and that seems to solve your first question in dev tools. Since you are using bootstrap, in your custom CSS stylesheet you'll probably want to add:
#frill {
margin-top: 20px!important;
}
For the submit link you could give that link a class, like class="hide-link" in your html and then give that class a CSS rule of display: none; like:
.hide-link {
display: none!important;
}
I configured it according to https://help.frill.co/article/75-adding-the-widget
It's not really the right answer because what I was seeking was not done. But I removed the top elements instead.
Ive got a link showing up in my wordpress menu that is not present in back end (the costumizer). The link/element only shows up in front end/the live page. I've been in touch with the theme support but they only said it was not from the theme. The code does not either give me an explenation to where it comes from. The code for the element is the following:
Register
LOL I CAN't even write the code without it showing up as only "Register" above.
I want to remove it. I have searched and tried different solutions on this forum but cannot find a way to remove the element.
So far I've tried to add the following code to the "costum css" in the costumizer with no result:
a[href='register']{ display: none }
I am not an expereinced code man. So please excuse my lack of explenation.
See code from inspect in picture below:
Picture from inspect. The element I want to remove is the >Register just where the pink ends
This is a picture of the menu. As you can see the "Register" link I want removed does not even get the same styling as the other elements in the menu..
Any one know how to remove this element? I've been struggeling for so long trying to find a solution.
Thanks!
It is likely added to the menu object by one of the plugins you have installed on the site.
Try turning off your plugins one-by-one and checking to see if it goes away.
you can try
.left-menu li:last-child { display: none; }
or
.left-menu li:not(.menu-item) { display: none; }
I'm working with a project where I need to have a scrollable div element display the bottom when the page loads. This means that the user could scroll upward to see the rest of the content. The only way I could think of doing this would be to have the div autoscroll to the bottom on page load. But since load time is important for this project, I'd like to find another solution. Is there any other way to do this, preferably in something like css? Thanks!
You can use javascript to get this effect. It's fast, so you won't have to worry about load times:
var yourDiv = document.getElementById('yourDivId');
yourDiv.scrollTop = yourDiv.scrollHeight;
There are also numerous ways to implement this using jQuery. Here's a great blog post on the subject:
jQuery Scroll To
I'm not sure to understand well what you need, but maybe something like that:
#bottomDiv{
position:fixed;
bottom:0;
}
There is no javascript tag so what about hide element until css file is not downloaded (but this work only for 1st time, then will be css file cached)
<div id="bottom" style="display: none;"></div>
CSS
#bottom {
display: block !important;
position: fixed;
bottom: 0;
}
The design of the page should look like this:
http://www.ski.kommune.no/Skoler/Finstad/
Another css-file is loaded in this page, bringing some unwanted attribute of the css-tags, which makes the design undesirable, e.g. the text in the blue field is moved.
http://www.ski.kommune.no/Skoler/Finstad/Praktisk-informasjon/Test-av-bildegalleri/
Which css-tags are creating the design problem in the above example? I looked with Firebug, but I couldn't find.
What is the best way to restore the design?
The problem comes from 5th item in your main horizontal menu.
The list item there has a class="calendar".
according to browser developer tools that class is:
.skole .calendar, .skole .news-list {
overflow: hidden;
margin-bottom: 20px;
}
the problem there is margin bottom.
to solve the problem:
the best way is to separate the 2 classes and remove the margin-bottom from the calendar class.
a word of advice:
try learn how to use different browsers developer tools.
in my view the bests are chrome and firebug.
have fun!
I was wondering, I got this code:
<li>Home</li>
<li>Link 1</li>
And this code in CSS:
#link1
{
display: none;
}
#link1:target
{
display: block;
}
Also some design-stuff but it's included in the li part in my CSS code, so it's not needed here.
Right now, my homepage is always visible. How do I make the home-part disappear when I click on "Link 1"? Because now the content of "Link 1" appears beneath the home-content, instead of in its place (for which the home-content would have to disappear, which I said, it doesn't)
I'd like to keep everything in one html-document, that's why I'm using CSS, instead of linking to another page, which would probably make this a lot easier.
If I'm not clear or you need some extra code just tell me, but please do tell me what is unclear then. Thanks :]
Have you tried javascript/jQuery at all?
$('#link1').click(function()
{
$('#home').hide();
});
Give a try to jQuery tabs. Very easy to use and it will do it all for you.
http://jqueryui.com/demos/tabs/