How to compress this menu?

HTML & CSS
1

Hi there everyone!

This question is in relation to the menu on the left side of the content portion of the page.

https://wheeltastic.com/sidemenu.html

I am wondering if someone could tell me what css elements would allow me to vertically compress the space in each menu entry. I’m trying to find the important parts of the css but I think there may be more than one element dictating it as I changed everything I could think of for height but it remained the same on refresh.

Here’s a really bad example-shop of my goal:

Current:

What I’d love:

Could someone point me toward the necessary css elements to make this happen?

Thanks for your time!

2

sideparmenu.css line 27.

#cssmenu > ul > li > a {
   padding: 20px;
}

Reduce the padding.

3

Thanks very much for that, Sam. Could you also explain how I would fine tune the arrow that points down when opening a child menu entry? I’ve widened the menu somewhat and now the right side of the arrow no longer spans the entirety of the menu. I’d also like to make it less vertically pronounced and have it be a bit shallower in regards to how far down it goes into the element below it.

4

Play around with this.

#cssmenu ul > li.has-sub.open > a::after{

border-top-width:8px;
border-left-width:136px;
border-right-width:136px;
bottom:-8px;
}

#cssmenu ul > li.has-sub.open > a::before{
display:none
}
1 Like
5

Hi there Paul and thanks for the help.

I’m sorry for the ignorance, but are you saying to add these rules to my css? I don’t see anything similar already in there.

If you are saying to add it as new, can I ask how it’s making it happen now if the rules aren’t already in there?

6

Lines 62 and 84 of sidebarmenu.css have these selectors with border rules that you need to adjust.
Looks like the arrows are created by using borders to make the shape.

7

Thanks Sam,

I have tried to implement the change but I’ve messed up somewhere. It seems that my arrow altered in size but now it’s floating below instead of tucking up against the parent element. I’ve updated the demo page:

https://wheeltastic.com/sidemenu.html

8

I gave it to you as over-rides to save you messing up the code you had :slight_smile: All you needed to do was add it at the end.

If you look at the code I gave you then I updated the bottom position.

In line 123 of your css change it to -8px as you still have it at -13px which was for the deeper arrow…

#cssmenu ul > li.has-sub.open > a::after {
    opacity: 1;
    bottom: -8px;
}
9

Thanks a bunch Paul. I have one more problem that I can’t find the solution to. Now that I’ve squashed the menu vertically, the arrow on the right side for the drop down is no longer centered vertically and I’m having a problem finding where in the CSS I can make this change. I thought I’d be able to find it easily by looking for the color white, but I can’t see anything dealing with spacing.

Would you happen to know where I could change that?

10

Look for the element, not the color.

https://wheeltastic.com/theme/1/css/sidebarmenu.css
(line 105)

#cssmenu ul > li.has-sub::after {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: #dddddd transparent transparent;
    border-image: none;
    border-style: solid;
    border-width: 7px;
    content: "";
    display: block;
    height: 0;
    pointer-events: none;
    position: absolute;
    right: 20px;
    top:50%;  /* CHANGED FROM 24.5px */
    width: 0;
    z-index: 2;
}
11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.