Changing default appearance of custom menu

• 

  cfournier224 · Member · Jul 16, 2015 at 8:10 pm

  • Copy link
  • Add topic to favorites

  Hello,

  I added a child / custom menu to my About category, but it looks God awful! I understand that the Hive theme has this set-up as default, but I’d like to know how to change the appearance.

  How can I reduce the width of the custom menu (right now it spans the entire site) and change the background color from black to…whatever:)

  Also, the “t” in the word “About” (from my category menu) looks weird…like it has an extra bar crossing it….can you see that too?

  Merci beaucoup in advance:)
  C.

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

• 

  darrellschulte · Member · Jul 16, 2015 at 8:55 pm

  • Copy link

  Only 1 out of 3, @cfournier224.

  ul.sub-menu {
      background-color: #ff9005;
  }
  
  .nav--main .menu-item-has-children > a::after {
      border-bottom-color: #ff9005;
  }

• 

  darrellschulte · Member · Jul 16, 2015 at 8:58 pm

  • Copy link

  Scratch that.

  .nav--main .menu-item-has-children::after {
      content: "";
  }

  I’m not entirely sure why it originally had a plus symbol within content in the first place…

• 

  cfournier224 · Member · Jul 16, 2015 at 11:27 pm

  • Copy link

  Excellent! And ya, what the heck was that “+” doing there??? :) It should find a nice CSS code somewhere to call home – not on my landing page!

  Now I just need to figure a way to shrink that giant box! Let me know if you think of anything …..and maybe someone else will also chime in!

  C.

• 

  thesacredpath · Member · Jul 18, 2015 at 7:28 am

  • Copy link

  The plus sign was there as a visual indicator that there there is a submenu. If you wish to see how it should look, temporarily remove the code @daschultemn gave and add this instead.

  .nav--main .menu-item-has-children::after {
      left: -1.25em;
  }

  Originally the left value was -2.25em.

• 

  cfournier224 · Member · Jul 18, 2015 at 1:30 pm

  • Copy link

  Yes, that looks great!

  Do you have any input as to reducing the width of the custom menu? I only have 1 sub-category in there (Guest Authors) and it looks like it’s floating out in the middle of nowhere…. I’d want to menu to be as wide as the number of sub-cat that I add….not have all this empty space.

  Also, I noticed there is a little…arrow(?) that appears when the custom menu opens – it poins up to “About”. Any way to change the color on that?

  Merci beaucoup!
  C.

• 

  darrellschulte · Member · Jul 18, 2015 at 1:50 pm

  • Copy link

  The second item on https://en.forums.wordpress.com/topic/changing-default-appearance-of-custom-menu?replies=6#post-2427312 takes care of the arrow color.

• 

  cfournier224 · Member · Jul 18, 2015 at 1:56 pm

  • Copy link

  Yes it does! I probably didn’t notice, sorry!! :)
  Still no thoughts on the menu width?
  C.

• 

  thesacredpath · Member · Jul 18, 2015 at 5:56 pm

  • Copy link

  Hi, this will narrow the submenu.

  ul.sub-menu {
      width: 30%;
      left: inherit;
  }

• 

  cfournier224 · Member · Jul 18, 2015 at 10:08 pm

  • Copy link

  You rock.

  Tell me, if I add sub-categories to that menu, will they go side-by-side with the one I already have in there or can I make them fall underneath one another?

  C.

• 

  thesacredpath · Member · Jul 18, 2015 at 10:53 pm

  • Copy link

  You know, right now it is not showing sub-sub menu items. I’ve found some bugs in the menu on Hive, and am writing a bug report on it and hopefully there will be an update very soon to fix the issues with the menu, including not showing sub-sub menus. I’ll post back here just as soon as this has been updated and fixed.

• 

  cfournier224 · Member · Jul 23, 2015 at 5:44 pm

  • Copy link

  thank you. I don’t have any sub-sub menus now but will likely in the future, so yes, I’d appreciate know about it!

  Best,
  C.

• 

  thesacredpath · Member · Aug 4, 2015 at 6:34 pm

  • Copy link

  @cfournier224, due to the changes you made to the submenu (vertical rather than horizontal) the menu issue you are seeing with submenus can be easily corrected by adding
  top: inherit;
  to
  ul.sub-menu
  in your custom CSS.

  In further testing, what I’m seeing on your site is actually the opposite of what I see on the demo site, but the above fixes the issue on your site as well as on an unmodified menu in Hive.

• 

  cfournier224 · Member · Aug 12, 2015 at 9:10 pm

  • Copy link

  ok, thanks for this!

• 

  thesacredpath · Member · Aug 13, 2015 at 8:58 am

  • Copy link

  You are welcome.