Remove the gap from the Cinnamon Menu

[Jeanne]

Hello.

How can I remove this gap from the Cinnamon Menu?



There are a lot of themes with this gap (much bigger in some cases) and I don't know what is its purpose but I don't like how it looks.

Any help please?

[ciryon]

Never noticed this gap...until now .

[elbullazul]

hi,

I've seen this issue very often. Opening the theme cinnamon.css file and search for popup-menu.js, and then edit the line

­ -arrow-border-radius: Xpx;

and set the value to 16px

[Jeanne]

hi,

I've seen this issue very often. Opening the theme cinnamon.css file and search for popup-menu.js, and then edit the line

­ -arrow-border-radius: Xpx;

and set the value to 16px

Thank you very much! It worked perfectly for the Vertex theme.

Unfortunately, this value breaks some other themes like this one:



After changing the value, it has rounded corners:



But I hope this will work with most of themes, thank you again.

[elbullazul]

hi,

I've seen this issue very often. Opening the theme cinnamon.css file and search for popup-menu.js, and then edit the line

­ -arrow-border-radius: Xpx;

and set the value to 16px

Thank you very much! It worked perfectly for the Vertex theme.

Unfortunately, this value breaks some other themes like this one:



After changing the value, it has rounded corners:



But I hope this will work with most of themes, thank you again.

you can fix this by tricking Cinnamon so that it believes you have a rounded arrow but overwrite the roundness value further.

under .popup-menu, add the following line

border-radius: 0;

it should remove the rounded borders while still reducing the gap (if the previous fix was applied)

[Jeanne]

hi,

I've seen this issue very often. Opening the theme cinnamon.css file and search for popup-menu.js, and then edit the line

­ -arrow-border-radius: Xpx;

and set the value to 16px

Thank you very much! It worked perfectly for the Vertex theme.

Unfortunately, this value breaks some other themes like this one:



After changing the value, it has rounded corners:



But I hope this will work with most of themes, thank you again.

you can fix this by tricking Cinnamon so that it believes you have a rounded arrow but overwrite the roundness value further.

under .popup-menu, add the following line

border-radius: 0;

it should remove the rounded borders while still reducing the gap (if the previous fix was applied)

Thank you for the reply.

I'm not sure if did something wrong but that line didn't work.

This is the theme: https://cinnamon-spices.linuxmint.com/themes/view/552 I will try to ask to the author.

[elbullazul]

Thank you very much! It worked perfectly for the Vertex theme.

Unfortunately, this value breaks some other themes like this one:



After changing the value, it has rounded corners:



But I hope this will work with most of themes, thank you again.

you can fix this by tricking Cinnamon so that it believes you have a rounded arrow but overwrite the roundness value further.

under .popup-menu, add the following line

border-radius: 0;

it should remove the rounded borders while still reducing the gap (if the previous fix was applied)

Thank you for the reply.

I'm not sure if did something wrong but that line didn't work.

This is the theme: https://cinnamon-spices.linuxmint.com/themes/view/552 I will try to ask to the author.

well, I did a little tweaking to the theme and this is the result :



you just have to replace the .popup-menu-boxpointer and .popup-menu sections with the following code :

.popup-menu-boxpointer {
-boxpointer-gap: 4px;
-arrow-border-radius: 16px;
-arrow-background-color: transparent;
/*-arrow-base: 15px;
-arrow-rise: 8px;*/
}
.popup-menu {
border: 4px solid #92d92e;
border-top: none;
border-left: none;
border-right: none;
border-radius: 0 0 0 0;
background-color: rgba(0,0,0,0.85);
}

[Jeanne]

It looks great now, thank you very much!