Making the menus more conspicuous

• 

  budapesteducation · Member · Oct 23, 2014 at 2:28 am

  • Copy link
  • Add topic to favorites

  I would like the menus (above the header image) on my page to stand out more. Is there a way to put the menus in a tab or ribbon format? I’m using the Chateau theme, and I like everything else about it, so I’d like to keep using the theme, if possible.

  The blog I need help with is: (visible only to logged in users)

• 

  thatrobyn · Member · Oct 23, 2014 at 5:19 pm

  • Copy link

  Hello there!

  While you cannot adjust the style of the menu, you can adjust the colors/sizing a bit to make the menu items stand out.

  Here’s an example of what you can do:

  Click Appearance → Customize in your site’s Dashboard. Then, click CSS in your right-hand menu. In the CSS Revisions box, please paste the following underneath all existing text:

  .content-sidebar #primary {
  background-color: white;
  }

  #branding, #main, #footer-inner-inner, #copyright-inner-inner {
  background-color: darkred;
  }

  ol, ul {
  font-size: 1.1em;
  }

  Then Save your changes.

  I hope this helps! If you have any other concerns, drop me a note. Thanks much!

• 

  budapesteducation · Member · Oct 23, 2014 at 7:11 pm

  • Copy link

  Is something like this possible? Currently, if you choose any menu other than “Home,” that menu changes color (to dark red) and lines above/below are drawn in light gray. So my questions are:

  1. Can we do this for the “Home” menu, too?
  2. Can the lines above/below the selected menu be thicker and darker in color? (In fact, can I choose my own color for those lines?)

  Thank you!

• 

  thatrobyn · Member · Oct 23, 2014 at 8:01 pm

  • Copy link

  Hi again!

  Currently, if you choose any menu other than “Home,” that menu changes color (to dark red) and lines above/below are drawn in light gray. So my questions are:
  1. Can we do this for the “Home” menu, too?

  Certainly. Please click on Appearance → Menus in your site’s Dashboard, or simply click the link below:
  https://budapestteachingscholars.wordpress.com/wp-admin/nav-menus.php

  Click the little down arrow next to Home in your menu structure.

  Change your URL: https://budapestteachingscholars.wordpress.com

  To this URL: http://bsmeducation.com/

  Then click the Save Menu button.

  2. Can the lines above/below the selected menu be thicker and darker in color? (In fact, can I choose my own color for those lines?)

  Sure. Let’s go back to your Customizer. Click Appearance → Customize in your site’s Dashboard. Then, click CSS in your right-hand menu. In the CSS Revisions box, please paste the following underneath all existing text:

  #menu .current-menu-item > a {
  border-color: #292929;
  border-bottom-width: 3px;
  border-top-width: 3px;
  }

  Then Save your changes.

  I arbitrarily chose a very dark gray for the border color. You can choose your own hex color code from a site such as this:

  http://www.color-hex.com/

  Let me know if you have any other questions. Cheers!

• 

  budapesteducation · Member · Oct 23, 2014 at 8:24 pm

  • Copy link

  Looks great! Thank you!

• 

  thatrobyn · Member · Oct 23, 2014 at 9:52 pm

  • Copy link

  My pleasure! Best of luck with the site :)