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/
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.
I am working on: https://www.thewellnessproject.net/
I want to keep the drop-down indicators in the sub-menu (as shown under "Recipes"), however I would like to remove them from the top level menu (Recipes, Intuitive Eating, etc.).
I've tried something along the lines of the below, but with no success:
.menu-item-6194 a:after {
display: none;
}
Happy to provide any additional info.
I just inspected the source code of your page. Based on that, use below snippets.
for(count=1; count<=5; count++)
{
var main = getElementsByClassName("elementor-item")[i].getElementsByTagName("span")[i];
main.classList.add("remove_dropdown_arrow");
}
Paste above code in cusotm JS section of WordPress.
.remove_dropdown_arrow{
display:none;
}
Paste above code in custom CSS section of WordPress.
The gist is, I am getting all top level elements of main header menu. Then looping and adding a custom CSS class in element where we have ">" in items.
I hope this will work in one go, but you might need some tweak on your side.
Hope this will help you.
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; }
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.
I am trying to implement a js accordion I found and I'm having problems with it. The titles are supposed to cleanly slide up to the top of the page and drop the content below. That is not what is happening. There is some obvious jumpiness going on when you look at it. It's not smooth at all. I don't know much about js so please explain your answers carefully. Thanks so much!
http://imip.rvadv.com/accordion.html
EDIT:
After replacing the js with the default file from the site I got it from, nothing changed. Here is a jsfiddle for it
http://jsfiddle.net/imakeitpretty/ruwjn/
Check this: http://jsfiddle.net/luissanchezm86/ruwjn/4/
The problem wasn't the .js, and you don't have to write it all on jsfiddle, since it's JQuery UI, you can simple check it to include it, if it's another external .js, use it as a resource, check fiddle's documentation for that.
Besides that, the other problem was your CSS markup, you had a lot of duplicated classes in that fiddle, it was a bit of a mess.
The main problem with the jumping was the:
.st-accordion ul li.st-open > a{
margin-top: 70px;
}
I just commented that margin-top: 70px;, and it fixed 75% of the problem, I recommend you to use the css that I arrange on the jsfiddle.
Hope it helps you!
UPDATE
Now, if you want to scroll all the way up like http://jsfiddle.net/luissanchezm86/ruwjn/5/ you need to make the body higher on height:
body {
height: 2000px;
}
After looking at your code, you appear to be using this plugin:
http://tympanus.net/codrops/2011/10/12/flexible-slide-to-top-accordion/
If you go to that page, it has the javascript options you need to control the animation speeds, as well as a working example which is more smooth than yours.