Topic: Align navigation to the right on mobile

YEAR93
March 28, 2024 at 7:04 am
Hello,

My header and navigation on desktop are the same as on mobile. I’ve added this CSS to hide the text but leave the icons of the menu items on mobile:
```
@media only screen and (max-width: 768px) {
	.inside-header {
		flex-direction: row;
	}
	
	.main-navigation .main-nav ul {
		column-gap: 15px;
	}
	
	.main-navigation .main-nav ul li a {
		font-size: 0;
		padding: 0;
	}
	
	.main-navigation .main-nav ul li a > i {
		font-size: 25px;
		vertical-align: middle;
	}
}
```
However, there is still some space on the right of the icons. How can I fix this? View screenshot for reference. Additionally, I’ve included the link to the website.

Ying

March 28, 2024 at 9:03 am

Try this:

@media(max-width: 768px) { 
.main-navigation ul li a {
    width: min-content;
}

.main-navigation li a > i {
    padding-right: 0;
}

.main-navigation .main-nav ul li a {
    line-height:20px;
    height:20px;
}
}

YEAR93
March 28, 2024 at 11:07 am

This works perfect. Thank you!
Ying
March 28, 2024 at 11:13 am

You are welcome 🙂

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

Align navigation to the right on mobile