Wordpress with Divi does not show display logo in main menu - php

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 !

Related

Sub menus have disappeared

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');
});

Wordpress Navigation Walker change ul, li for div and anchor tags

I am trying to create a custom markup for my WordPress menu, when I add a menu in WordPress, the HTML that shows is as follows:
<div class="menu-menu-container">
<ul id="menu-menu" class="menu">
<li id="menu-item-13" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-13">
Home
</li>
<li id="menu-item-14" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14">
Another Sample
</li>
<li id="menu-item-15" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-15">
Sample Page
<ul class="sub-menu">
<li id="menu-item-22" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-22">
Hello world!
</li>
</ul>
</li>
</ul>
</div>
I'm trying to change the code so that it will display using the anchor and div tags instead of ul and li. This is to work with the Bulma framework.
Normal link code:
<a class="navbar-item" href="#">Home</a>
Dropdown link code:
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link" href="#">Sample Page</a>
<div class="navbar-dropdown">
<a class="navbar-item" href="#">Sample Link</a>
</div>
</div>
Another reason I am trying to do this is to remove all of the unnecessary class and id attributes that WordPress automatically adds.
Is this possible with WordPress by using a walker?
Yes it is, you can use
https://github.com/wp-bootstrap/wp-bootstrap-navwalker (most common)
You can also check
1) https://github.com/wp-bootstrap/wp-bootstrap-navlist-walker
2) https://github.com/jprieton/wp-bootstrap4-navwalker
3) https://github.com/dupkey/bs4navwalker

Wordpress expand sub-menu when clicking on parent

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

How to split child categories into columns using wp_nav_menu()?

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.

how do I remove additional anchor tag in a bootstrapped WordPress dropdown menu?

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>

Categories