My web site has suddenly come down with some problems, with no known changes. Most prominently, no sub menus appear. The html is there, everything appears to be there in wordpress in the admin panel to be set up right. But no sub menus appear on hover. Site is btwimages.com.
<!-- ################ TOP MENU SECTION ################ -->
<!-- **Top-Menu** -->
<div id="top-menu">
<div class="container">
<ul id="menu-main-menu" class="menu"><li id="menu-item-2351" class="home menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home"><span class="hoverL"> <span class="hoverR"> </span> </span>Home</li>
<li id="menu-item-2352" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children"><span class="hoverL"> <span class="hoverR"> </span> </span>About Us
<ul class="sub-menu">
<li id="menu-item-2316" class="menu-item menu-item-type-post_type menu-item-object-page">About BTW images</li>
<li id="menu-item-2318" class="menu-item menu-item-type-post_type menu-item-object-page">Testimonials</li>
<li id="menu-item-2317" class="menu-item menu-item-type-post_type menu-item-object-page">Our Team</li>
</ul>
</li>
<li id="menu-item-2353" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children"><span class="hoverL"> <span class="hoverR"> </span> </span>Services
<ul class="sub-menu">
<li id="menu-item-2354" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children">Real Estate
<ul class="sub-menu">
<li id="menu-item-2341" class="menu-item menu-item-type-post_type menu-item-object-page">Photography</li>
<li id="menu-item-2340" class="menu-item menu-item-type-post_type menu-item-object-page">Floor Plans</li>
<li id="menu-item-2343" class="menu-item menu-item-type-post_type menu-item-object-page">Virtual Tours</li>
<li id="menu-item-2342" class="menu-item menu-item-type-post_type menu-item-object-page">Video Tours</li>
<li id="menu-item-2339" class="menu-item menu-item-type-post_type menu-item-object-page">Brochures</li>
<li id="menu-item-3454" class="menu-item menu-item-type-post_type menu-item-object-page">TrueVision</li>
</ul>
</li>
<li id="menu-item-2888" class="menu-item menu-item-type-post_type menu-item-object-page">3D Immersion</li>
<li id="menu-item-3098" class="menu-item menu-item-type-post_type menu-item-object-page">Virtual Staging</li>
<li id="menu-item-2344" class="menu-item menu-item-type-post_type menu-item-object-page">Video</li>
<li id="menu-item-2336" class="menu-item menu-item-type-post_type menu-item-object-page">General Photography</li>
<li id="menu-item-2337" class="menu-item menu-item-type-post_type menu-item-object-page">Marketing</li>
</ul>
</li>
<li id="menu-item-2329" class="menu-item menu-item-type-post_type menu-item-object-page"><span class="hoverL"> <span class="hoverR"> </span> </span>Portfolio</li>
<li id="menu-item-2355" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children"><span class="hoverL"> <span class="hoverR"> </span> </span>Pricing
<ul class="sub-menu">
<li id="menu-item-2333" class="menu-item menu-item-type-post_type menu-item-object-page">Real Estate Photography</li>
<li id="menu-item-2912" class="menu-item menu-item-type-post_type menu-item-object-page">3D Immersion Tour</li>
<li id="menu-item-2331" class="menu-item menu-item-type-post_type menu-item-object-page">Floor Plans</li>
<li id="menu-item-2332" class="menu-item menu-item-type-post_type menu-item-object-page">Brochures</li>
<li id="menu-item-3099" class="menu-item menu-item-type-post_type menu-item-object-page">Virtual Staging</li>
<li id="menu-item-3455" class="menu-item menu-item-type-post_type menu-item-object-page">TrueVision</li>
</ul>
</li>
<li id="menu-item-2356" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children"><span class="hoverL"> <span class="hoverR"> </span> </span>News
<ul class="sub-menu">
<li id="menu-item-2328" class="menu-item menu-item-type-post_type menu-item-object-page">Latest News</li>
<li id="menu-item-2325" class="menu-item menu-item-type-post_type menu-item-object-page">BTWeen the lines</li>
<li id="menu-item-2327" class="menu-item menu-item-type-post_type menu-item-object-page">Latest Home Tours</li>
</ul>
</li>
<li id="menu-item-2357" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children"><span class="hoverL"> <span class="hoverR"> </span> </span>Support
<ul class="sub-menu">
<li id="menu-item-2482" class="menu-item menu-item-type-post_type menu-item-object-page">FAQ</li>
<li id="menu-item-2910" class="menu-item menu-item-type-post_type menu-item-object-page">3D Immersion FAQs</li>
<li id="menu-item-2347" class="menu-item menu-item-type-post_type menu-item-object-page">Help Videos</li>
<li id="menu-item-2349" class="menu-item menu-item-type-post_type menu-item-object-page">Preparation Checklist</li>
<li id="menu-item-2348" class="menu-item menu-item-type-post_type menu-item-object-page">Media Terms of Use</li>
<li id="menu-item-2350" class="menu-item menu-item-type-post_type menu-item-object-page">Service Policies</li>
</ul>
</li>
<li id="menu-item-2358" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children"><span class="hoverL"> <span class="hoverR"> </span> </span>Contact Us
<ul class="sub-menu">
<li id="menu-item-2320" class="menu-item menu-item-type-post_type menu-item-object-page">Learn More</li>
<li id="menu-item-2321" class="menu-item menu-item-type-post_type menu-item-object-page">Request Service</li>
</ul>
</li>
</ul> </div>
</div><!-- **Top-Menu - End** -->
<!-- ################ TOP MENU SECTION END ################ -->
If you can't fixed it through admin panel, you can add this code to your header or footer:
jQuery('.menu-item-has-children').hover(function() {
jQuery('.menu-item-has-children .sub-menu').css('display', 'none');
jQuery(this).find('.sub-menu').css('display', 'block');
});
Related
Hy, i work on a website made with Wordpress, Divi and a child theme. I have an header with a navigation and the logo centered on the nav. The header is fine when i'm connected but when i'm not connected (like a visitor) the logo is on display: none and out of the navigation list. The header is generated by WordPress, the logo is insert in the general section of Divi settings.
Here is the code when i'm connected to the Back office
<header id="main-header" data-height-onload="66">
<div class="container clearfix et_menu_container">
<div id="et-top-navigation" data-height="66" data-fixed-height="66">
<nav id="top-menu-nav">
<ul id="top-menu" class="nav">
<li id="menu-item-993" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-993">Plantes et Épices</li>
<li id="menu-item-758" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-758">Les coffrets</li>
<li id="menu-item-994" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-994">Accessoires</li>
<li class="centered-inline-logo-wrap">
<div class="logo_container">
<span class="logo_helper"></span>
<a href="https://dev.lacaravelleverte.com/">
<img src="https://dev.lacaravelleverte.com/wp-content/uploads/2020/07/logo-caravelle-verte.svg" alt="La Caravelle Verte" id="logo" data-height-percentage="100">
</a>
</div>
</li>
<li id="menu-item-5143" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-5143">
Qui sommes-nous ?
<ul class="sub-menu">
<li id="menu-item-756" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-756">Notre Histoire</li>
<li id="menu-item-1150" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1150">Nos certifications</li>
</ul>
</li>
<li id="menu-item-757" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-757">Les producteurs</li>
<li id="menu-item-831" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-831">Blog & Recettes</li>
</ul>
</nav>
<div id="et_mobile_nav_menu">
<div class="mobile_nav closed">
<span class="select_page">Sélectionner une page</span>
<span class="mobile_menu_bar mobile_menu_bar_toggle"></span>
</div>
</div>
</div> <!-- #et-top-navigation -->
</div> <!-- .container -->
<div class="et_search_outer">
<div class="container et_search_form_container">
<form role="search" method="get" class="et-search-form" action="https://dev.lacaravelleverte.com/">
<input type="search" class="et-search-field" placeholder="Rechercher …" value="" name="s" title="Rechercher:">
</form>
<span class="et_close_search_field"></span>
</div>
</div>
</header>
And here is the code when i'm not connected to the Back office
<header id="main-header" data-height-onload="66">
<div class="container clearfix et_menu_container">
<div class="logo_container">
<span class="logo_helper"></span>
<a href="https://dev.lacaravelleverte.com/">
<img src="https://dev.lacaravelleverte.com/wp-content/uploads/2020/07/logo-caravelle-verte.svg" alt="La Caravelle Verte" id="logo" data-height-percentage="100">
</a>
</div>
<div id="et-top-navigation" data-height="66" data-fixed-height="66">
<nav id="top-menu-nav">
<ul id="top-menu" class="nav">
<li id="menu-item-993" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-993">Plantes et Épices</li>
<li id="menu-item-758" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-758">Les coffrets</li>
<li id="menu-item-994" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-994">Accessoires</li>
<li id="menu-item-5143" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-5143">
Qui sommes-nous ?
<ul class="sub-menu">
<li id="menu-item-756" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-756">Notre Histoire</li>
<li id="menu-item-1150" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1150">Nos certifications</li>
</ul>
</li>
<li id="menu-item-757" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-757">Les producteurs</li>
<li id="menu-item-831" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-831">Blog & Recettes</li>
</ul>
</nav>
<div id="et_mobile_nav_menu">
<div class="mobile_nav closed">
<span class="select_page">Sélectionner une page</span>
<span class="mobile_menu_bar mobile_menu_bar_toggle"></span>
</div>
</div>
</div> <!-- #et-top-navigation -->
</div> <!-- .container -->
<div class="et_search_outer">
<div class="container et_search_form_container">
<form role="search" method="get" class="et-search-form" action="https://dev.lacaravelleverte.com/">
<input type="search" class="et-search-field" placeholder="Rechercher …" value="" name="s" title="Rechercher:">
</form>
<span class="et_close_search_field"></span>
</div>
</div>
</header>
We can see the logo container is moving. When i'm connected it's in the navigation list and when i'm not connected it's out of the navigation.
I don't touch anything in the header.php of my child theme. It's for that i'm out of ideas.
I wish i'm almost clear.
Thank's for your time.
It seems to be working for me (?)
I'm sorry, but i resolve it. It was the configuration of WP Rocket !
thank's for your time !
I am making a wordpress theme using _s as a basis. I am trying to style the menu. So far I don't have any particular CSS on the menu. I have looked at the (responsive) menu for the Twenty Sixteen theme, and I want to have the same the of menu, but only the "responsive" menu for smaller screens. On my site, the menu does not have to be responsive though. The menu (on smaller screens) looks like this, which is what I want:
Twenty Sixteen theme demo: https://twentysixteendemo.wordpress.com/ (You have to resize to a small screen to see the menu I am talking about)
I want that type of menu largely because it has the ability for a "expand/drop-down button" that can show sub-content in the menu.
So my question is: how can I style my menu so that it looks like the Twenty Sixteen theme's (mobile/tablet) menu including the button that expands the menu sub-categories?
I have searched the web for days without finding info on this. It seems every article that merely address the issue are just copy-paste of other badly explained articles.
This is the rendered HTML I have for my menu right now:
<ul id="primary-menu" class="main-menu"><li class="has-children menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1706">Group 1
<ul class="sub-menu">
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1707">Sub Group 1
<ul class="sub-menu">
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1708">Image</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1709">Image</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1710">Image</li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1711">Sub Group 2
<ul class="sub-menu">
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1712">Sub Group Level 3
<ul class="sub-menu">
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1713">Image</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1714">Image</li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1715">Image</li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1730">Image</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1731">Image</li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1718">Group 2
<ul class="sub-menu">
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1719">Image</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1720">Image</li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1721">Group 3
<ul class="sub-menu">
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1722">Image</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1723">Image</li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1724">Group 4
<ul class="sub-menu">
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1725">Sub Group 3
<ul class="sub-menu">
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1726">Image</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1727">Image</li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1728">Image</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1729">Image</li>
</ul>
</li>
</ul>
This is the menu in my header.php
<div class="menu-container">
<nav id="site-navigation" class="main-navigation" role="navigation">
<?php wp_nav_menu(array(
'theme_location' => 'primary',
'sort_column' => 'menu_order',
'menu' => 'Categories',
'container_class' => 'main-menu',
'menu_id' => 'primary-menu',
'menu_class' => 'main-menu'
) ); ?>
</nav><!-- #site-navigation -->
</div><!-- #menu-container -->
What my menu looks like now:
You can achieve this with javascript (jquery) or only with css.
Css example: https://codyhouse.co/gem/css-multi-level-accordion-menu/
jquery example: https://perishablepress.com/jquery-accordion-menu-tutorial/
hope this helps
I use the wordpress funcion wp_nav_menu() to display a hierarchical menu I created in my WP menu. Here's the snippet:
<?php wp_nav_menu('show_home=1&menu_class=page-navi&sort_column=menu_order'); ?>
Here's its html output:
<div class="menu-default-container"><ul class="page-navi" id="menu-default"><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-127" id="menu-item-127">Home Page</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-128" id="menu-item-128">Il film
<ul class="sub-menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-129" id="menu-item-129">Di che cosa parla?</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-133" id="menu-item-133">Una storia di occasioni</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-130" id="menu-item-130">Il Regista</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-131" id="menu-item-131">Il “maestro”</li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-139" id="menu-item-139">Incontri e discussioni</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-153" id="menu-item-153">News ed eventi</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-141" id="menu-item-141">Film e lavoro in classe
<ul class="sub-menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-142" id="menu-item-142">Il titolo del film</li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-134" id="menu-item-134">Interviste</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-19 current_page_item menu-item-138" id="menu-item-138">Sponsor e collaborazioni</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-151" id="menu-item-151">Contatti</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-158" id="menu-item-158">Credits</li>
</ul></div>
The problem is that sometimes it's displayed properly:
.. and others isn't:
I checked the source code and it's THE SAME!! :o
Don't know what to think. These things scare me! :P
Here's the website if you want to try to reproduce this (if you're lucky.. in the nights of full moon)..
This is happening because of this style:
ul li {
display: inline;
padding: 2px;
}
Adding the following style to your css should fix your problem:
.menu-default-container ul li {
display: block !important;
}
I have a navigation menu which uses Wordpress' wp_nav_menu() function to first render the parent categories and all child categories to that category in a drop down sub menu. The markup looks as follows:
<li id="menu-item-256" class="category-electronics menu-item menu-item-type-taxonomy menu-item-object-category">
<a class="expander-btn" href="#">
<div class="drop-down">
<div class="arrow left"></div>
<ul class="sub-menu">
<li id="menu-item-272" class="menu-item menu-item-type-taxonomy menu-item-object-category">
<li id="menu-item-271" class="menu-item menu-item-type-taxonomy menu-item-object-category">
<li id="menu-item-270" class="menu-item menu-item-type-taxonomy menu-item-object-category">
<li id="menu-item-269" class="menu-item menu-item-type-taxonomy menu-item-object-category">
<li id="menu-item-268" class="menu-item menu-item-type-taxonomy menu-item-object-category">
<li id="menu-item-267" class="menu-item menu-item-type-taxonomy menu-item-object-category">
<li id="menu-item-266" class="menu-item menu-item-type-taxonomy menu-item-object-category">
<li id="menu-item-265" class="menu-item menu-item-type-taxonomy menu-item-object-category">
<li id="menu-item-264" class="menu-item menu-item-type-taxonomy menu-item-object-category">
<li id="menu-item-263" class="menu-item menu-item-type-taxonomy menu-item-object-category">
<li id="menu-item-262" class="menu-item menu-item-type-taxonomy menu-item-object-category">
<li id="menu-item-261" class="menu-item menu-item-type-taxonomy menu-item-object-category">
</ul>
</div>
</li>
I would like to be able to split the child categories up in columns (with 5 or 6 links in each column), but don't really know how to go about to accomplish this. I've spent almost 30 hours on this now to no avail, so any ideas would be much appreciated. Thanks in advance!
You can always use a http://codex.wordpress.org/Function_Reference/wp_nav_menu#Using_a_Custom_Walker_Function to format a decent HTML markup for columns as many as you want.
There is also another solution possible by using only CSS. Just put width on the <ul> and width of the <li>(the <ul> should be twice as wide as the <li>) and float the <li> elements inside.
First <li> in the first column
Second <li> in the second column
Third <li> in the first column
etc.
Code used in functions.php to create WordPress [Dropdown enabled] Twitter Bootstrap
Menu: http://pastebin.com/HCxCcBmG
Code used in header.php: http://pastebin.com/7eTHTjij
Here's what gets generated for the dropdown menu code:
<ul class="dropdown-menu">
<li id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29">
site design
</li>
<li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-30">
app design
</li>
<li id="menu-item-31" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-31">
windows
</li>
<li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-32">
mac
</li>
</ul>
How do I remove the additional anchor tag/link genereated in the first dropdown menu link? Like this:
<ul class="dropdown-menu">
<li id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29">
site design
</li>
<li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-30">
app design
</li>
<li id="menu-item-31" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-31">
windows
</li>
<li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-32">
mac
</li>
</ul>