Mobile Menu and colour

Hi @leahasana,

Yes, you can display the three menu items in a row. Try setting the style of your menu to “List of Links” instead of “Dropdown” (or just delete the style="dropdown" from your shortcode) and add CSS to display the list elements as “inline-block.”

I’m not sure what you mean about matching the background. Once you change the menu over to a list, you may need to add some CSS to make the text white like your other text in that block, and since you’ll be using links, you may want to add CSS for hover and visited, but it may not be necessary depending on the other CSS of your theme.

It should be possible to use one of the many tutorials out there to use pure CSS to create a responsive hamburger menu. Try searching for the terms “css responsive hamburger menu”. This one is promising, and it looks like it could be adapted for the elements of Menu In Post. It’s nice that it uses a character code for the hamburger icon instead of an icon or image.

The main thing is to make sure you assign custom class(es) in your Menu In Post shortcode to use in your new CSS so the CSS applies only to it, and not to other lists on your site.

Thank you very much for your help.

I will give this a try over the next couple of days and I will let you know how it works out.

Leanne

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.

Thank you so much for your help. I am a beginner when it comes to CSS. Would you be willing to suggest code that might work. That would give me a great starting point.

Thanks,
Leanne

This isn’t really a beginner task, but if you’re willing to put forth the effort, it’s a good task to move you beyond the beginner stage. ??

The first step is to convert your Menu In Post menu to a list as I mentioned above. You should also assign classes to the Menu In Post container and menu to:

1. Make your CSS specific to those elements in case you do re-use your main menu CSS and want to override some aspects of it. For example, the font color of the main menu is black, which won’t show up on the black background where your new menu will be.
2. Serve as placeholders in your code so that you can use your browser’s Developer Tools to do real-time edits to test existing classes, if you decide to try that.

Next, you should check out the Developer Tools in your browser of choice. Both Chrome/Chromium and Firefox come with developer tools that let you view the layout and the CSS associated with each element as well as altering it to test things without requiring you to make permanent changes.

Once you’ve changed the dropdown to a list, I can take another look and see if there’s anything I can suggest.

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.

Ok. I will give that a try.

I did change it to list instead of drop down.

https://yournewwebsite.ca/60fhz-millimeter-wave-wireless-transceiver-with-clip/

Thanks,

That looks good.

To make the items display inline and give them some spacing, you’ll need something like:

#menu-60ghz-millimeter-wave-wireless-transceiver-with-clip li {
	display: inline-block;
        margin-right: 15px;
}

If you’re going with the tutorial’s layout and CSS, you won’t need that, of course.
I’d capitalize “Parameter” too, to make it match “Supported”.

Hi,

I used the tutorial you suggested and ended up with this:
https://yournewwebsite.ca/60fhz-millimeter-wave-wireless-transceiver-with-clip/

What do you think? Any suggestions?

Thank you,
Leanne

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 3 years, 2 months ago by linux4me2.

Thank you so much. I applied the changes you suggested.

I really apprciate your help.

You’re welcome! I’m glad you got it working the way you wanted.

I will go ahead and mark this one as resolved, but feel free to post again if needed.

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.