On the WordPress theme I am working on https://themes.getmotopress.com/2019/ the menu turns into a circle and excess menu items are put into this when the screen resolution decreases.
I would like to stop <div class="main-menu-more"> from showing and all elements become listed in the main container. I have used the code
.main-navigation .main-menu-more {
display:none;
}
Which hides the more menu however the elements inside do not show?
Try this style I hope this will work for you but you should have to upgrade style according to your requirement
#media (max-width:500px){
.submenu-expand{
display: none;
}
.main-navigation .sub-menu {
background-color: transparent;
position: relative;
opacity: 1;
left: 0;
}
.main-navigation .sub-menu > li > a, .main-navigation .sub-menu > li > .menu-item-link-return {
color: #0073aa;
}
.sub-menu:hover{
position: relative;
}
}
I checked out the source codes of the WordPress you are currently working and determined that by deleting the word "toggle" from class="submenu-expand main-menu-more-toggle is-empty" which will become class="submenu-expand main-menu-more is-empty" will no longer hide the menus in the circle, but will simply become part of the responsive webpage.
The code came from the button section of your WordPress. Simply search for the class attribute with a value of "submenu-expand main-menu-more-toggle" using the search function on your text editor and delete the word "toggle" from it. It worked for me.
Let me know how it went.
Related
I am working on a site that that is supposed to display sub-menus when you hover over both the "References" and the "Contact Us" items in the main nav. However, these items will not display.
I have tried adding hover properties via CSS to the menu & sub-menu items but nothing seems to work. It seems to always default to the "display: none;" for the sub-menu.
Here is the URL for the site: http://fongconstruction.com
I'm not sure where to go from here, if there is a CSS fix that maybe I'm missing then any guidance would be helpful! Thanks in advance!
First you need to delete below css from custom.cs(line number 1) and style.css(line number 844) https://prnt.sc/15pru62
#nav .sub-menu {
display: block !important;
}
Also you need to delete inline style(display: none) from sub menu https://prnt.sc/15ps03v
After that add this css
#nav li ul.sub-menu {
display: none;
}
#nav li:hover ul.sub-menu {
display: block;
}
I was able to locate a solution by using a different selector that I had not thought of before:
#menu-item-5990 a:hover + .sub-menu,
#menu-item-5237 a:hover + .sub-menu {
display: block;
}
This is my first time on stackverflow and hope someone could help me with this kind of problem.
I made website in Wordpress and want to disable hover effect on my category list in webshop. There are parent categories which automatically, when you hover with mouse, dropdown child categories. After researching i found css solution which looks like this:
.widget.woocommerce.widget_product_categories ul li{
pointer-events:none;
}
Wordpress Customize Custom CSS,
After this kind of update i found the problem - when i click on parent category, nothing happens (because of pointer-events obviously).
Is there any CSS solution for this kind of problem?
Hello did you try the following, I think you can use the CSS to just disable to pointer event on hover:
.widget.woocommerce.widget_product_categories ul li:hover {
pointer-events: none;
}
Edit 1:
ok the functionality that you need can't be done with CSS alone, you will need a bit of Javascript.
Try to add the following code in theme javascript file
jQuery(".cat-item.cat-parent > a").click(function(event) {
event.preventDefault();
const ul_children = jQuery(this).parent().find('> ul.children');
if(jQuery(this).parent().hasClass('open')) {
jQuery(this).parent().removeClass('open')
ul_children.css('max-height',0)
} else {
jQuery(this).parent().addClass('open');
ul_children.css('max-height', ul_children[0].scrollHeight )
}
})
also add the following CSS:
.product-categories > .cat-parent:hover > ul.children {
max-height: 0px;
}
.product-categories li ul.children li:hover > .children {
max-height: 0px;
}
You should replace this code
.cat-parent:hover > ul.children {
max-height: 373px;
overflow-y: scroll;
overflow-x: hidden;
}
by this one
.cat-parent:active > ul.children {
max-height: 373px;
overflow-y: scroll;
overflow-x: hidden;
}
The only step left is to remove the link from your parent category. If you do not remove this link, it will redirect you automatically when you click on it
Simply we can hide container when in hover effect by Jquery such as
// remove popup on hover for mini cart dawar
$(".icon").hover(function(){
$("#container").css("display", "none");
});
I have a problem with one menu item that appears to be left-aligned rather than centered as the rest of the menu items.
link to site
You can see that there is a smaller space between the first and second menu items. (site is RTL so first from the right)
Can anyone help me solve this?
Your stylesheet contains the following:
.fl-page-nav-left .fl-page-nav ul.navbar-nav>li:first-child a {
padding-left: 0;
}
You can find this in your stylesheet and remove it.
Alternatively, you can add the following CSS:
.fl-page-nav-left .fl-page-nav ul.navbar-nav>li:first-child a {
padding-left: 25px !important;
}
Your first menu item (from the right) has been styled with the following CSS:
.fl-page-nav-left .fl-page-nav ul.navbar-nav > li:first-child a {
padding-left: 0;
}
This piece of css is used for a styling in a non-RTL website; the padding is on the left side of the menu item. Change it to:
.fl-page-nav-left .fl-page-nav ul.navbar-nav > li:first-child a {
padding-right: 0;
}
I am currently working on the following Wordpress site:
http://2013.whitehallrow.com/
It's obvious that the horizontal menu items are not styled properly. I want the "Media" link to fit on the right side of the navbar; how do I go about changing the width of each item so that they will all fit?
I also want the menu items to be centered, so that the margins on each side are equal. My knowledge of the existing Wordpress theme's CSS is sketchy; could anyone give me some guidance?
This is a little "dirty", because it is specific for your menu and for names that have been included in it. But maybe is useful:
.main-navigation li {
margin: 0 30px 0 0;
position: relative;
}
/* For the distance of the first element */
main-navigation li:first-child {
margin-left: 50px;
}
/* For nulling the distance of the first child element */
.menu-item-type-post_type li:first-child {
margin-left: 0;
}
Of course you can do that.
Look in menu css file and find .your_menu_name li a section. Here look for padding and just adjust size.
For ex. if is padding-left:30px; replace 30 with 10 and see you working menu.
You can customize to by adding hover condition like background-color:#CCCCCC;
You can select each menu item by using CSS3 pseudo class :nth-child(N), refer this. Eg.:
.nav-menu li:nth-child(3) {
display: block;
width: 300px; /*Your individual menu-item width here*/
}
To align your menu to center you have to change your css in style.css (line no: 1460) to following
.main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {
border-bottom: 1px solid #8293FF;
border-top: 1px solid #8293FF;
display: table;
text-align: center;
width: 100%;
}
I'm trying to style a custom menu in the sidebar of a child theme of
WordPress' TwentyTwelve theme.
I'm trying to give a current menu item a grey background.
Unfortunately the "parent" menu item somehow gives the background-color to an area much wider than only the current li menu item.
I'm now using this css code:
.current-menu-item {background-color:#666!important;color:#ff0000!important;font-weight:bold;}
.menu li:not(.current-menu-item) {color:#fff!important;background-color:#333!important;}
To give an example/show what I mean: I'm trying to accomplish it on http://populair.eu, you see on the front page that the menu item "populair" also give a grey background around the image above. The sub menu items are ok.
the weird thing is that it runs ok on my localhost.
I have the feeling that if there would be a < br /> between the < asides> it would be solved but somehow im probably missing something.
Has anyone experience with this? / How it should be styled?
You have to use ".current-menu-item a" to give the background to the anchor link, not to the list item. Also, on your ".menu li a" you may have to "display: block" and "clear: both;". The bigger area is a floating problem.
The best thing for you to do is use either Google Chrome's inspect element software or use Firefox's firebug and select the item, while using either of these you can change the CSS code live. This means that while you are looking at the bit you want to change you can change the code and it will reflect in a way you can see it, you will however need to make these changes in your style.css file on your child theme.
Take a look at the menu that is currently on my website www.driftedmass.co.uk, if that is the kind of thing you are looking for then get in touch with me via the contact form on my site.
If you are wanting to bring down the size of the menu you might need to do something like this (were the <<<< that is the bit you need):
.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
border-bottom: 1px solid #ededed;
border-top: 1px solid #ededed;
>>>> display: inline !important; <<<<<<<<
text-align: center;
width: 100%;
background: transparent;
border-color: #ff0000;
}
.main-navigation ul {
margin: 0;
text-indent: 0;
background-color: #ffffff;
}
.main-navigation li a,
.main-navigation li {
display: inline-block;
text-decoration: none;
}
The bit with the arrows would have originally looked like this:
display: inline-block !important;
I hope this sort of helped you out a little bit.