Navigation menu css

Resolved

(@katead)

Hi,

I’m trying to change design of nav-menu and my result should look like this –
link. I know that it is easy but I don’t know why I can’t make it… When I use smaller padding in “thefunk-nav-menu a:hover” it start to “jump”. Anyone can help me out with my problem?

.thefunk-nav-menu a {
	border: none;
	color: white !important;
	display: block;
	padding: 28px 24px;
	padding: 1.8rem 1.4rem;
	position: relative;

    	font-weight: 400;
    	-webkit-border-radius: 4px;
    	-khtml-border-radius: 4px;
   	-moz-border-radius: 4px;
    	border-radius: 4px;
    	margin-right: 4px;
}

.thefunk-head-nav a {
	display: none;
	color: black !important;
}

.thefunk-nav-menu a:hover {
	color: #534077 !important;
	background-color: #ffffff;
}

Viewing 6 replies - 1 through 6 (of 6 total)

Theme Author Hardeep Asrani
(@hardeepasrani)

10 years, 6 months ago

Hi,

Sorry but could you please explain this issue? 🙂

Regards,
Hardeep

Thread Starter katead
(@katead)

10 years, 6 months ago

I have 2 categories in my navigation menu (cat1 and cat2). When I move my mouse from one category to another, bottom line of navigation menu start to move up and down.

I should mention that I had to add “padding: 8px 14px” in “.thefunk-nav-menu a:hover”, because there should be small “white” button under text.

Theme Author Hardeep Asrani
(@hardeepasrani)

10 years, 6 months ago

Could you give me the link to your website to check? 🙂

Thread Starter katead
(@katead)

10 years, 6 months ago

Sure – link.

Btw. thank you for your reply 🙂
Thread Starter katead
(@katead)

10 years, 6 months ago
I made small and very stupid mistake… Now everything is ok 🙂
```
.thefunk-nav-menu {
	clear: both;
	color: #999;
	font-family: Lato, sans-serif;
	line-height: 1.5;
	padding: 1.2rem 1.4rem;
	width: 100%;
}

.thefunk-nav-menu .menu-item {
	display: inline-block;
	text-align: left;
}

.thefunk-nav-menu a {
	border: none;
	color: white !important;
	display: block;
	padding: 8px 14px;

    	font-weight: 400;
    	-webkit-border-radius: 4px;
    	-khtml-border-radius: 4px;
   	-moz-border-radius: 4px;
    	border-radius: 4px;
    	margin-right: 4px;
}

.thefunk-head-nav a {
	display: none;
	color: black !important;
}

.thefunk-nav-menu a:hover {
	color: #534077 !important;
	background-color: #ffffff;
	padding: 8px 14px;
}
```
Anyway- ty for your time.
Theme Author Hardeep Asrani
(@hardeepasrani)

10 years, 6 months ago

Awesome! I’m glad to hear that you were able to find the solution. Please consider leaving a review for the theme if you like it. 🙂

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Navigation menu css’ is closed to new replies.