Is there a simple way to create a customer menu in WordPress that does not output a list? Basically I want a menu with pipes between the links. Every solution I've found says to style them with a right border or background image, but I'm not crazy about this solution and what if I wanted something like a "/" or "ยป" between each link? I think live type would look better too. I already know I can remove the container div and ul tags using "items_wrap" and "container". Any ideas on how to ditch the li's too and add separators? A filter or hook?
I'm looking to do this with WordPress functionality. I know I can resort to CSS and jQuery if needed and in fact am doing that, but I'm still curious as to how to override the menu system.
Just style the list propperly
li { list-style-type:none; }
li:before { content:"/ "; }
http://jsfiddle.net/sVvs8/
Related
might be simple for some, I did went thru the CSS selectors guide... but can't select my item for it to disappear. I tried a lot of things since an hour but I'm knocking my head.
Website is RadioQuebec.tv, I embedded in an i-frame a gettr feed and i want to remove everything that is above the beginning of the posts section.
https://imgur.com/a/CB5z2kI
Thanks, Tommy
Use css like this:
body .jss55 .backTitle {
display: none !important;
}
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; }
i tried to hidden the subcategory and sub-subcategory menu in topmenu horizontal in Clasic Theme Prestashop 1.7.3 but i didnt find the correct code css and php code in tpl.
If anybody can help me? Only need change the code in css or .tpl too?
Thanks.
By CSS is really easy, with google chrome you can do...
Right click in the element of the menu you want to hide.
Click on Inspect
Now in the DevTool will be highlighted the element.
Do right click on it.
In the contextual menu, make click on Copy > Copy selector
After this, you will have the CSS selector that you need to hide in your clipboard, just paste it in some style sheet (CSS file) to create your rule to hide the element, something like this:
#category-3 > a {
display: none;
}
In some of this style sheets should works:
/themes/YOUR_THEME/assets/css/custom.css
/themes/YOUR_THEME/assets/css/theme.css
Once made, don't forget to clear the cache.
Using the Flatsome theme I have a few questions and would like to try and get them solved myself, is this the manner in which I should direct those questions?
I'm running WooCommerce I'd simply like to know how to make the breadcrumbs bar a little smaller where it displays the name.. on the single product page it looks great but I see no settings to edit it on the display list, i can show you a screenshot of the problem here (ALSO I WANT TO CHANGE THE WHITE BACKGROUD WHERE IT SAYS "HEADSHOP" TO SOMETHING MORE MATCHING) -- THERE ARE NO OPTIONS FOR CHANGING ANY OF THIS?
I'd really like to be able to edit this area and I'd like to gain more access to it, this theme appearance editor area wont let me do it, I've tried and tried to no avail!
With that being said, this is just the display of all the main products.. What throws me off is that in the Single Product page it formats exactly the way I want it to on all pages, see example here..
Im not an expert but I suggest you to put the URL of your website as minimum, because is going to be difficult to help you without what you have tried or the code of your website.
Following with the question, you can reduce the height of the container using some CSS. By default both margins (in this case the padding) are in 20px, so i just reduce them to 0.
.featured-title .page-title-inner {
padding-bottom: 0px;
}
.page-title-inner {
position: relative;
padding-top: 0px;
min-height: 60px;
}
This is how it looks with the modifications in the margins.
https://i.stack.imgur.com/r7KX7.jpg
https://i.stack.imgur.com/bMmNd.jpg
But still, I don't understand what it's keeping the text so high in the container.
To change the background color of that button, you can modifiy the CSS Property.
.nav-tabs > li.active > a {
background-color: red;
}
This is how it looks.
So you just need to put that CSS in your theme.
If my answer helped you, please consider marking it as an Answer.