Close Mobile Menu on Item click (elementor kit, wordpress) - wordpress

I just can't seem to find the answer for this. I have tried some of the answers on this forum but it doesn't work. If I'm on mobile view and click on a menu item which has a "#" as link. The menu does not close. This is the site I am trying it on. I hope some one knows the problem.
www.cfxsquad.nl/verge/

The question is not detailed enough to understand exactly which item in the menu that doesn't work and what you want to achieve, but I assume it is the CASES link that causes a problem. It doesn't include `href="..." at all, so that's why it isn't responding to clicks.
The others below it include <a href="#" ... correctly. To get this to work you should include a href="#" and then change the # to a regular url in the wordpress format:
CASES

The mobile menu will automatically disappear when you get your links working – clicking the links will reload the page and the menu will be gone until the next time you click the open icon.
If you want a fancier animated retreat of the menu, you can try a javascript click handler of type mainMenu.addEventListener('click', closeMenu(e)) targeting either the whole menu area or each individual link item.
Then you attach that handler to the toggle menu javascript that already exists (I wasn't able to find the actual code in your site, the structure is hard to grasp and I only found a twentyseventeen theme). You can do that by replacing closeMenu(e) with the name of the function that toggles the menu from the hamburger menu. Make sure that you load your new JS after the theme's original script.
If you can't use the original toggle animation you have to first create a css animation, then add that css class to the #main-menu element dynamically with javascript when the menu/links are clicked. Imagining you have already declared your mainMenu variable above, and created the animate-close css class in your stylesheed (and that the css-class that keeps the menu open is called open:
const closeMenu(e) => {
// e.preventDefault() -- only if you don't want the
// link clicks to work/send you along to the next page
// Now close that darn menu:
if (mainMenu.classList.contains('open') {
mainMenu.classList.add('animate-close')
mainMenu.classList.remove('open')
}
}

Related

How to disable top page from dropdown menu wordpress?

I relly need help. I made a wordpress website, but i dont know how to disable top page from drom down menu.
I want to turn off page "Apartmani" because it is a empty page, so can you tell me how to disable that page and when you want to click on it nothing happens.
Here s the picture http://www.dodaj.rs/f/t/13H/495kOjY8/pitanje.png so i want to unable "Apartmans".
Thanks
The easiest way for you do do this is not to add this "Apartmani" as a Page in your menu, but as a simple link (as you can add custom links in your menu), with "#" as target. As is you will have a menu item that will handle its sub-pages, but this item will not lead to anything at all as long as the targeted link is #...

New menu link without css styling

This is a wordpress website designed by a third party which I am doing some amendments to.
I'm trying to add a new menu item called 'news & events' which links to all posts categorised with that name. Problem is the css isn't styling the link as per the rest of the navigation links (font / speech bubble on rollover). I've added new lines of code to style.css but it's not picking up on the styling.
I did a test and added one of the existing links again to see how the css behaved, and that dropped out too. It seems like no matter what link I put in, the css styling won't apply to it.
Does anyone know why this is happening?
looks like you have each of the menu items getting assigned from its own style.
if you were to give it the class "nav-opinion" to the list item containing it this would work fine. what I would probably do is give a class to all of the side menu items instead of doing them each individually.
Solved it. In Wordpress there is a hidden menu for css classes. In there I added nav-opinion tk-museo-slab and now it works!

WordPress Hero SlideShow Links

I'm fairly new to WordPress and I'm working on a site that was created by someone else; I've inherited the entire thing. There is a Hero Slideshow which works, but users have to click on the "tabs" then click on another image (Learn More) in order to go to the page they want; which of course is too much trouble.
I've found the code in front-page.php and I've changed how the spans and a href tags are in hopes of making the "tabs" in the Hero slideshow link directly to the associated pages. Everything looks correct and if you hover over the tabs the browser will show the correct link - however when you click on the tab it simply rotates the slideshow and doesn't actually link to the associated page. I can't find where I can change this behavior.
Anyone have any ideas?
stay well away from the php in wordpress .
just uninstall the hero slideshow and use "Cyclone Slider 2" plugin its very user friendly
easy to use , you can add and change pic and there is a lot of options on movement speeds enbed url links (etc)

Drupal 7 theme css added to a views page when used as the front/home page

I am a CSS noob and I created a carousel using jCarousel. It works like it should as a page and with tabbed menus. The problem is the theme adds CSS to it when I go to /admin/config/system/site-information and make the view the default front page. It adds list bullets over each carousel item and changes the displayed item location.
I want to remove these bullets from the view but not the entire site. The development site can be seen at http://delphos.lib.oh.us/NewSite/
If you click on one of the "tabs" (red boxed buttons) the display problem goes away.
Any help would be appreciated.
TBG
Try looking for this line:
.art-postcontent ul>li:before, .art-post ul>li:before, .art-textblock ul>li:before {}
You can remove the whole line, or just remove the content attribute. Either should work.

Wordpress link different color custom menu

I'm currently working on a Wordpress website with an custom jQuery menu. And everything is working fine except for one thing. I want to add a active class to an menu item that corosponds with the current page.
So basicly when the viewer is on the page "catering" I want the catering menu button the have an different style then the rest. But because it's wordpress I can't put in the html so I guess it has to be done with PHP but that's really not my thing.
So I was wondering if any of you could point me in the right direction. Here is the link to the website http://no-illusions.nl/projecten/kokaanhuis/wordpress/# no pages are currently working but when you hover over a button a brown layer appears, I want that layer to be static (when it's down) on the current home page but can´t figure out the best way to do it.
Use wp_nav_menu (http://codex.wordpress.org/Function_Reference/wp_nav_menu). It attaches a current-menu-item class, as well as a few other useful classes (current-menu-ancestor, etc) for styling. Plus you'll also be able to easily edit the menu with the menu admin page.

Resources