Changing default appearance of custom menu
-
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)
-
Only 1 out of 3, @cfournier224.
ul.sub-menu { background-color: #ff9005; } .nav--main .menu-item-has-children > a::after { border-bottom-color: #ff9005; } -
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…
-
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.
-
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.
-
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. -
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.
-
Yes it does! I probably didn’t notice, sorry!! :)
Still no thoughts on the menu width?
C. -
-
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.
-
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.
-
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. -
@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.
-
-
- The topic ‘Changing default appearance of custom menu’ is closed to new replies.