Menu appearance and behavior

My main menu text strings are rather long, so I have split them onto two lines, using <center> and a <br>. See usphilatelics.com.

I know that <center> is deprecated - how do I go about finding what css I should change for this ? And why does the text now appear in red ?

I also have the problem reported elsewhere regarding menu dropdowns not clearing when another menu is selected - but this now seems to apply to all screen sizes, not just tablets.

Any help would be appreciated.

Hello there,

I hope you are doing well today.

You can use the following CSS code to center the menu by going to Appearance > Customize > Additional CSS and pasting it there.


/*Centre menu*/
.navbar-nav > li {
    text-align: center;
}

/*Menu color*/
.navbar-nav > li a {
    color: white;
}

As for the menus not clearing, I am not seeing this issue, could you please provide an image of this issue?

Best Regards,
Support

Thanks - that’s helping, but I have to set menu color to black, as otherwise it’s white on a white background. Can I close up the two lines of the menu text (it was closed up when I used <center> !)
The menus do not clear if I click on the down arrow beside a menu item, so I get the attached image.

Hello there,

What exactly do you mean by close up? Do you want the menu items in one line?

As it goes for the menu drop down not clearing, please try deleting your browser cache then reload the page.

Best Regards,
Support

No, I don’t want each menu item on a single line - I want to have them spanning two lines, but closer together.
Menu drop down still doesn’t clear after clearing cookies and cache. Happens with both Chrome and Firefox.

Hello there,

Please try out this CSS to edit the line height in the menu:


/*Menu line height*/
.navbar-nav > li {
    line-height: 10px;
}

As for the menu clearing issue, please try this:


ul.dropdown-menu {
    clear: both;
}

Best Regards,
Support

No, neither of those seem to work. The line-height adjustment does seem to work if I use <center>, but I’m tryingto avoid that.
Do you see the same effect as me ?

Hello there,

Please remove the <center> code so that I can test out a solution properly.
I am not seeing the issue where the menu drop down does not clear.

Please try using this plugin to clear your WordPress cache:

Best Regards,
Support

Have already removed the <center> tag.
Are you clicking on the actual down arrow, rather than the text string ?
That plugin does not seem to clear cache; its purpose is to serve cached static files ?

Sorry - I have just seen that that plugin can delete cached pages, so I have done that.

Hi there!

To move the two lines closer together please use this code in Additional CSS:



body .navbar-default .navbar-nav > li > a {
    line-height: 17px;
}


As for your second issue, with the drop-down menu, this seem to be a bug and I have opened a ticket with the development team so they can check it out and fix it in their new update.
You can follow it here: https://github.com/puikinsh/Sparkling/issues/211

Hope this helped!

Have an awesome day,
Mihaela

That’s brilliant, Mihaela - thank-you very much. Is there any way I can find out for myself what css classes to modify for this sort of thing ?

Hello there,

The easiest way is to right click the element on the page you want to change then select inspect element, this will show you the classes and it’s attributes.

Best Regards,
Support