Customizing WordPress Submenu?

Can you not apply a display: block; style to your submenu?

I can, but I want to achieve this effect like here: https://www.louvre.fr/en

without affecting the width of the parent links…

Can you describe what on that page, you want?

I want each submenu to appear independently without following the position of the parent. In other words, I want all submenus to appear on one spot, not right beneath their parent.

Are you working on a website where you want this implemented? If so, can you link that website?

I am working on this one: vblok.com

But I have only the default submenus, what I want is the effect of https://www.louvre.fr/en

However currently I am trying to achieve this offline, but I can;t because of the nested menu structure. The submenu always appears under their parent, not where I want it to…

On your vblok website, I added this code (temporarily);

.main-navigation li ul {
 display: block;
}

And achieved this https://awesomescreenshot.com/0adqsmx98 .
Where did you get that theme from, by the way?

I know I tried display:block, but the point is to achieve the slideDown and push effect, where the submenu pushes everything down. I achieved this too, where the submenu pushes everything, but all I want is that the submenu appears on the middle, not right under the parent when a parent is clicked.

To make it clear, each submenu should appear at the same spot when their parent is clicked, for example, first parent is clicked, the first parent submenu appears, then second parent clicked, first parent menu disappears and second one appears on the same spot where the first one was.

I hope this didn’t confuse you, if it did then just look at https://www.louvre.fr/en, this is what I want to achieve.

About the theme, a friend of mine made it.

I am looking for the same end result with the sub menu’s being separated.

Galanx: I think I know what you are saying and i have achieved what you want using the menus the way they are. I position each sub menu using position:absolute and left align it and display and hide when needed.

Look here for some examples https://www.fin-ex.com/v2

The problem i have is that I am making a mobile friendly site and because the elements are positioned absolutely, they do not drop below each other when the screen is made narrow.

So for example. at the moment i have this

<ul class="menu">
    <li>link 1
        <ul class="submenu-1">
            <li>submenu-1 link 1</li>
            <li>submenu-1 link 2</li>
        </ul>
    </li>
    <li>link 2</li>
    <li>link 3
        <ul class="submenu-2">
            <li>submenu-2 link 1</li>
            <li>submenu-2 link 2</li>
        </ul>
    </li>
</ul>

but what I really want is

<ul class="menu">
    <li>link 1</li>
    <li>link 2</li>
    <li>link 3</li>
</ul>

<ul class="submenu-1">
    <li>submenu-1 link 1</li>
    <li>submenu-1 link 2</li>
</ul>

<ul class="submenu-2">
    <li>submenu-2 link 1</li>
    <li>submenu-2 link 2</li>
</li>

this way I don’t have to use position: absolute and I can just hide and display when I want and they will just stack below each other the correct way.

Everybody is talking about setting up a custom “walker” or something like that but I haven’t figured it out yet. perhaps someone could help us out here

You can make the sub-menu appear wherever you want by adding this to the sub-menu class:

position: absolute;

then the values for x & y

top: 0px
left: 0px

—- edit —-
oops I didn’t read the part where you indicate that you don’t want to use position: absolute. But why not?

The reason being is that I am building a mobile friendly site. I want the menus to stack on top of each other. if i use absolute positioning they are fixed to a certain height from the top.

Take the site I posted as example. make your browser screen narrow and you will see that the menu option for the 1st level menu drop down behind the second level.
if they weren’t positioned absolutely then it would just push the 2nd and 3rd level menu down perfectly.

— Side Note —
I will eventually make a more mobile friendly menu but for now this is the only option for me.

@galanx

hope this is what you were looking for. instead of using the default wordpress menu call use this:

<ul id="nav">
<?php wp_list_pages('title_li=&depth=1'); ?>
</ul>  

<?php if($post->post_parent)
$children = wp_list_pages("title_li=&child_of=".$post->post_parent."&echo=0"); else
$children = wp_list_pages("title_li=&child_of=".$post->ID."&echo=0");  

if ($children && is_page()) { ?>
<ul id="subnav">
<?php echo $children; ?>
</ul>
<?php } else { ?>
<?php } ?>

You can order the pages according to “menu-order” i believe.

the kind of menu used by the Louvre (you linked to) is really popular with touch screens. but implementing this kind of interface with wordpress is still a pain. i’ve been googling for 2 days straight. on the verge of paying someone for help.

hope fully the code i’ve posted here will help me out.