linux4me2

Hi @leahasana,

I want to let you know that WordPress 5.9, due out the 25th of January, includes the new Navigation Block. The Navigation Block will collapse the menu for mobile devices when needed, and you can customize it as you like, so I think it will accomplish all you wanted without the need of the workaround.

Hi @obertscloud,

Sorry I didn’t get an email notification when you posted this and just noticed it.

While you could use CSS to make the list created by Menu In Post look like a regular navigation menu, there’s going to be a better option soon.

WordPress 5.9, arriving on January 25th, includes the new Navigation Block, which you can insert into a page or post. It will be less work than using Menu In Post, and won’t require an extra plugin. It also includes a setting to collapse the menu if required by the dimensions of the user’s device.

I’ve tested the Navigation Block both with a Block Theme and with a non-block theme, and it works well. I’m not sure if Visual Composer is compatible with it yet, but you can give it a try.

If that doesn’t work out, you can set the CSS of a Menu In Post list-style menu’s li elements to inline-block and get an inline list.

Bravo, @leahasana! Nice work!

If I size my browser to more than 768 pixels wide and less than 1200 pixels wide, the hamburger menu doesn’t appear, and the menu items wrap to additional lines, which I don’t think you intend. That’s because of this line:

@media screen and (max-width: 768px){

You can see what I’m talking about if you use the Responsive Design Tools in Firefox (Ctrl+Shift+M) or in Chrome/Chromium (F12 to open Developer Tools, and then Ctrl+Shift+M). You can increment the width using the text box at the top of the window until you get the width where the menu items begin to wrap to the next line.

To fix that, just change the 768px to the value where you want the hamburger menu to appear that will avoid the menu items wrapping to the next line.

Other than that, I guess it should be “Technical Parameters” plural since you have more than one parameter, but it looks just like what I think you wanted, and you did it without having to add a plugin.

• This reply was modified 4 years, 5 months ago by linux4me2.

You know @leahasana, we may be making this more difficult than it need be.

You could just use a Custom HTML block instead of Menu In Post, and use the code snippet from that tutorial I linked above, substituting your menu for the one used in the tutorial, and adding their CSS to your theme’s Appearance > Customize > Additional CSS.

All you’d lose by not using Menu In Post is the convenience of updating the menus in Appearance > Menus, which it doesn’t look like you’d need, and the fewer plugins you run on your site, the better.

Please do let me know how it goes.

Your main menu has a class “main-nav”, is based on list elements like what Menu In Post creates, and is a responsive hamburger menu, which may present another option. The ul and li elements also have classes you might be able to borrow for your new menu to achieve the results you want.

Hi @collimarco,

I haven’t heard back from you, so I’m going to mark this as resolved. If you have any more information about WPML compatibility, please let me know.

Did you add the Javascript? The Javascript is what does the magic with the dropdown, I believe:

a.setAttribute("class", "select-selected");

Hi Peter,

Did you already fix this? When I look at your page, it doesn’t look like the image you linked to above.

When you create a dropdown menu shortcode in the plugin, it doesn’t include any specific CSS, just the HTML to build the menu, so the styling of the select element it creates will be inherited from your theme, and may not include classes specific to your theme that are used for other select elements the theme creates.

What I see on your page now is this:

.mip-drop-nav {
	margin-top: 5px;
	color: white;
	font-weight: 700;
}

so I think you already added a class and fixed it.