Archived topic

Change background color last main menu-item

5 replies · Started by Henk on January 8, 2022

Viewing posts 1–6 of 6

January 8, 2022 at 3:22 pm #2073779

Hi,

I would like to change the background color of the last main menu-topic.
To make a small test I specified some CSS by using a red border (see website).

The problem is that the height of the main menu is quite large and out of proportion. I needed more height for the menu because I need to make the logo bigger.

How can I improve this?

Thanks Henk

January 8, 2022 at 4:18 pm #2073811

Hi there,

Can you give this a shot first?
https://docs.generatepress.com/article/adding-buttons-navigation/

Let me know :)

January 9, 2022 at 6:49 am #2074178

Hi Leo,

I had almost the same CSS:

.main-navigation .main-nav ul li.menu-item:last-child a {
	border: solid 5px red;
	border-radius: 8px;
	line-height: 2.5em;
	padding-left: 1em;
	padding-right: 1em
	}

The line-height was the trick.

I also used em and not px, can you tell me the best-practice?
And is padding the right method in this case?

Thanks
-Henk.

January 9, 2022 at 8:31 am #2074415

Hi there,

1. Best practice - EMs most definitely for Line Height. For Padding thats up to you - i generally work with pixels on padding if i don't want the padding to change if the font size changes.

2. Padding is the correct property for making the element wider in this case.

January 9, 2022 at 1:33 pm #2074629

Thanks again!

January 10, 2022 at 4:11 am #2075170

You're welcome

This archived topic is closed to new replies.

Start building better websites today.