I'm creating my own wordpress template and I've coded a jQuery drop down menu that works statically but now I'm trying to make it dynamic the css is messed up. The drop down works but the menu doesn't displaying correctly.
The main menu displays vertical instead of horizontal and the secondary menu is horizontal, instead of vertical. Also the orange type for the main menu isn't displaying.
Here's a working static version
I hope I'm explaining myself thoroughly, if you need any more info please let me know.
Here is my wordpress template code
<div class="box">
<ul id="ldd_menu" class="ldd_menu">
<li>
<span>Menu</span>
<!-- Increases to 510px in width-->
<div class="sub_wrap">
<div class="ldd_submenu">
<nav>
<li class="ldd_heading"></li>
<?php wp_nav_menu(array('menu' => 'main_nav')); ?>
</nav>
<a class="ldd_subfoot" href="#"> Accessibility Link</a>
</div>
</li>
</ul>
</div>
<div></div>
I would suspect your code is not handling the output format of the wp_nav_menu method. Now I am not sure of your exact version, but newer versions will out put like this. So you will get extra div added in that you might not expect and the way the child menus are output may not be what you expect. Also, as the previous people said your code is not quite right, missing some tags.
<div class="menu-id-container">
<ul class="nav-menu" id="menu-id">
<li class="..." id="..">LINK
<ul class="sub-menu">
<li>Child LINK1</li>
</ul>
</li>
<li class="..." id="...">LINK2</li>
</ul>
</div>
Related
I'm attempting to have a portion of my React code appear in an in-line block using "flex-row" as a class name, but it's not working. I've looked at other questions and haven't been able to find the answer needed (I'm attempting it without using the "View" wrapper). My code is as follows (but my result is does not show the list in an in-line block; see attached image below):
<header data-testid="header" className="flex-row px-1">
<nav>
<ul className="flex-row">
<li className="mx-2">
<a href="#language" onClick={() => handleClick()}>
Language
</a>
</li>
<li>
<a href="#about" onClick={() => handleClick()}>
About Us
</a>
</li>
</ul>
</nav>
</header>
I feel like it's a simple fix, but any help is greatly appreciated. Thank you in advance!
I think you are using TailwindCSS. If so add a flex class before "flex-row" in element. Hope this will sort your issue/.
<header data-testid="header" className="flex-row px-1">
<nav>
<ul className="flex flex-row">
<li className="mx-2">
<a href="#language" onClick={() => handleClick()}>
Language
</a>
</li>
<li>
<a href="#about" onClick={() => handleClick()}>
About Us
</a>
</li>
</ul>
</nav>
</header>
It truly was a simple fix...lol. I had code for the navigation options "Language" and "About Us" to be in an in-line block (hence the "flex-row" denomination), yet I have <li> tags around the two navigation options. Once I took off the tag, it worked. Thanks, everyone! corrected image displayed here
I would like to make a profile menu like in Gmail what contains the user's display name and his user name and also two buttons with settings and logout. I would like to make it in angular 8.
http://prntscr.com/q1vd8y
<li>
<!-- user profile -->
<div class="profile">
<img class="avatar" src="" /><span></span>
<!-- more menu -->
<ul class="menu">
<li class="name">{{name}}</li>
<li class="name">{{useremail}}</li>
<li class="name">{{visiblename}}</li>
<li>Settings</li>
<li><a [routerLink]='["/logout"]'>Log out</a></li>
</ul>
</div>
</li>
</ul>
https://material.io/design/
here it is, my friend, the one and only, Material Design !
you can find css frameworks that will help you do it like
https://materializecss.com/
for example !
https://material.angular.io/ for angular
I am trying to get a sidemenu to work on Materialize when should be very simple:
First I add the sidenav content to the page:
<ul id="slide-out" class="sidenav">
<li><div class="user-view">
<div class="background">
<img src="images/office.jpg">
</div>
<img class="circle" src="images/yuna.jpg">
<span class="white-text name">John Doe</span>
<span class="white-text email">jdandturk#gmail.com</span>
</div></li>
<li><i class="material-icons">cloud</i>First Link With Icon</li>
<li>Second Link</li>
<li><div class="divider"></div></li>
<li><a class="subheader">Subheader</a></li>
<li><a class="waves-effect" href="#!">Third Link With Waves</a></li>
</ul>
Then I add the jquery code:
$( document ).ready(function() {
$('.sidenav').sidenav();
});
And finally the part where to problem is:
I have a nav which goes at the top of the page:
<nav>
<div class="nav-wrapper">
<img src="icon.png" alt="" />
<ul class="left hide-on-med-and-down" style="position: relative; left: 100px;">
<li>Trigger SideNav</li><!-- This is just not showing -->
</ul>
</div>
</nav>
For some reason this menu is not showing:
<li>Trigger SideNav</li>
unless I take this off it ... data-target="slide-out" class="sidenav-trigger"
How can I fix this?
In addition to what Moein said (the sidenav-trigger menu only appears when the page width is less than 993px), you can make it appear all the same adding the show-on-large class to your menu button.
Something like:
<nav>
<div class="nav-wrapper">
<i class="material-icons">menu</i>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li>Menu</li>
<li>Info</li>
</ul>
</div>
</nav>
as I know this is not a problem and the element that has sidenav-trigger class will be shown when the width of the browser is less than 993px. just resize your browser window width to reach less than 993px and see the result.
If it does not work:
I think the problem can be with the content of your link. replace the image with a text and try again.
For reputation reasons, I'm not allowed to comment. It'll work with the javascript code
document.addEventListener('DOMContentLoaded', function(){
var elems = document.querySelectorAll('.sidenav');
var instances = M.Sidenav.init(elems, {});
});
Instead of the code which is given in the official documentation you've to change this piece of code
M.Sidenav.init(elems, options);
with this
M.Sidenav.init(elems, {});
With the official javascript code you'll notice that there's an error in the console when you load the page.
How can I delete all thoses div around my menu create with menu_block for drupal 7 ?
I want to change this :
<div class="region region-nav">
<div class="content">
<div class="menu-block-wrapper menu-block-3 menu-name-menu-prive parent-mlid-0 menu-level-2">
<ul class="menu">
<li class="first expanded menu-mlid-559" style="width: 397px;">
Avantages
<ul class="menu">
<li class="first leaf menu-mlid-596">
Ecologie
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
into this :
<ul class="menu">
<li>
link
<ul class="menu">
<li>
link
</li>
</ul>
</li>
</ul>
Thank you
You will need to add new templates for your block and the region that holds it, in order to get rid of some of the markup.
Take a look at Drupal 7 Template Suggestions
Your block template name would look like this: block--menu-block.tpl.php. And for the markup, can be just
<?php print $content ?>
The region template name would look like this `region--YOUR_REGION_NAME.tpl.php``. And for the markup, can be just
<?php print $content ?>
(Don't forget to flush the caches after adding the new templates)
I have the below HTML which I want to translate into wordpress function "**wp_nav_menu()**"
<ul class="nav navbar-nav">
<li id="about-menu">
About Us
<div id="about-us">
.....
inner div(s) and
Paragraphs etc
......
</div>
</li>
<li id="contact-menu">
Contact Us
<div id="contact-us">
.....
inner div(s) and
Paragraphs etc
......
</div>
</li>
<li>News</li>
</ul>
Any Idea on how to do it?
You can create a custom nav walker. There are no docs on wordpress.org, but you could simply take a look at an existing walker