Custom Menu | Above Main Content | Lists menu items vertically

Thanks for choosing Author!

Could you share a link to your site? Once I check it out I can provide some CSS to change the display of the menu items.

johnknoerle.com

Thanks!

Great, thanks for the link!

You can use the following CSS to display the menu items in a row:

.sidebar-before-main-content .widget_nav_menu li {
  display: inline-block;
  margin-right: 12px;
}

Copy & paste the code above into the “Custom CSS” section in the Customizer (Appearance > Customize), and it should take affect right away.

Perfect! Thanks!

Is there a way to style the font size and the background? May want to change background from white to something less generic.

I figured out the font size. No problem. What I can’t figure out is how to change the color or otherwise make opaque the white box element.

Sure thing!

To change the background color, you can use the following CSS:

.sidebar-before-main-content .widget {
  background: #43b3c4;
}

That will set the background to a shade of blue, but you can change the color code to any color you’d like.

For changing the opacity, you’ll want to use an rgba value like this:

.sidebar-before-main-content .widget {
  background: rgba(76, 187, 203, 0.5);
}

If you were to just reduce the opacity of the widget, this would make the text in it transparent too. The code above specifically makes the background translucent. It has a red, green, blue, and alpha value. The alpha value is where the transparency comes from (on a scale from 0-1).

Thanks a bunch, Ben. One thing I noticed is that I had to add another .widget to the two above snippets to make it work.

In other words, it needs to (apparently) look like this…

.sidebar-before-main-content .widget.widget {
  background: rgba(76, 187, 203, 0.5);
}

Also added the curved corners snippet.

One last thing I can’t figure out, and it seems so minor I’m almost embarrassed to ask, is how do I change the font color?

Ah okay thanks for pointing that out.

Since links are being used in the widget, the color likely just needs the various link states added to apply correctly:

.sidebar-before-main-content .widget,
.sidebar-before-main-content .widget a,
.sidebar-before-main-content .widget a:link,
.sidebar-before-main-content .widget a:visited {
  color: #43b3c4 !important;
}

I went ahead and added an “!important” tag to force it to take effect, but you may not need that in there.

Thanks for everything, Ben!

You’re welcome ??

If you’re happy with Author, could you take just a minute to leave a review? I would really appreciate it.

Thanks!