I have developed wordpress website using Woo commerce plugin and I have created drop menu.
In my Site I have watch brands, knife brands and also some unwanted images deleted from watch brands. Now drop down of watch menu having extra width, its showing empty black area in Watches drop-down menu. I can't figure it out that how To reduce it ?
please help me into this.
Related
I have an all product category containing all my sub categories and products. The issue is that on the mobile version, if user want to see the sub category, they have to hold their finger on the tab. Clicking neither lead to all products or display sub categories. I tried on a computer and it seems that the menu is responsive as soon as you pass the cursor over it. Although it is great for cursor users, it renders the mobile version unusable.
mobile version sub category menu unresponsive
How would it be possible to create an on click event instead of on cursor event for the mobile version? Is it possible with css? I know you can specify the css based on media screen. Not sure what to edit tho and how?
Thank you
I am trying to create a multi-level responsive drop down menu.
This link opens a pdf that holds the pictorial description that I am trying to code
page1 in pdf - depicts multi level view
page2 in pdf depicts the first level of drop downs. A B and C are drop down menus
page3 in pdf depicts the complete view when drop-down C and all its children drop-down menus are clicked till the end of hierarchy i.e., till level4
Each level - 1, 2, 3 and 4 have to be aligned horizontally center and vertically middle. The entire design needs to be responsive.
At each level, on clicking a drop-down list item, the next level has to be shown.
Any level should disappear or collapse on mouse-out.
I tried various approaches, using the bootstrap framework. Each of the approaches ended up with some limitations. Tried lots of debugging, taking clues from google search and forums. All went in vain.
Can some one suggest what could be the best approach?
Can this be achieved with a combination of html5, css3, jquery and bootstrap framework alone?
Does this bring in a need of any other technology to be deployed?
on a wordpress custom theme, I'm using slicknav menu to create a responsive mobile menu.
It works great, so I decide to merge the second menu present on my site (category menu) in the mobile menu.
Using this codePen it's simple and easy, but I'd like to separate the menus in two floating columns, left category and right the global menu.
see image:
I currently can insert a "<hr>" between one menu and the other, using combinedMenu.append("<hr>");, but if I "append" to create the float combinedMenu.append("<div class='col-sm-6'>"); the resulting code is
<li><a>.....</a></li>
<li><a>.....</a></li>
<div class='col-sm-6'></div>
<li><a>.....</a></li>
so it closes the tag itself! GRRRRR
can anyone helps me?
bye, L.
my problem is with a bootstrap menu. I'm using wp_bootstrap_navwalker in my WP theme, and I found some solutions on the web to enable more deeper nav, but I can't find the solution to make it work fine on desktop and on smaller devices.
I have this structure of the menu:
My question is: How to enable all menu items, dropdown items and sub dropdown items to be clickable on all devices (on hover on desktop and on click on small devices). I suppose that on small devices there should be some function that lets you to click 2 time to access the link and on 1 click just to enable opening of the sub items.
I currently have this solution, but doesnt quite do what I want, as my sub dropdown items show up at the same time like this:
This is the exact code (JSFiddle) that I use in header.php and my style.scss.
Any ideas?
I have to reproduce menu of the winston.com website. It also has to work with wordpress, and I found the UberMenu but its sort of a personal project and I don`t want to spent money on plugins.
The website is built on bootstrap, and i found the next plugin: yamm 3 ( website ), but I simply cannot reproduce the menu from winston.com.
I also want it to be built on bootstrap, so if someone could help me make a reproduction with that YAMM3 plugin, it would be great!
Its pretty basic, you should start with an on hover event. With this event just "show" the menu which is hidden at first. On this menu add a transaction effect http://api.jquery.com/category/effects/
Start of with a simple div that has the correct position after your menu items. Then try to implement a jquery/javascript function to show/hide the correct menu item. After that add a transaction effect. Keep it simple first, aka use some basic colors and widths to understand how this dropdown menu works. After that, just extend/improve it to make it look like your example.