Archived topic

Primary Navigation Sub-Menu-Padding Left

3 replies · Started by melvin on April 5, 2021

Viewing posts 1–4 of 4

April 5, 2021 at 12:53 am #1721646

Hi,

I wish to achieve for each level of sub menu, there will be padding of 10px in front. Thus i added this code and the classes to my navigation.

@media (max-width: 1023px) {
.sub-menu-1 {
	padding-left: 10px;
}

.sub-menu-2 {
	padding-left: 20px;
}

.sub-menu-3 {
	padding-left: 30px;
}
}

However it turned out there will be empty space on the sub-menu hover color.
https://imgur.com/a/KqHhp1w

Could you please advise me what's the correct code to use so that I can have space infront of sub menu level 1,2,3, at the same time hover-color will not have empty space like above?

Melvin

April 5, 2021 at 4:31 am #1721791

Hi there,

try this CSS:

@media(max-width: 1023px) {
  .main-navigation .main-nav > ul ul > li > a {
    text-indent: 10px;
  }
  .main-navigation .main-nav > ul ul ul > li > a {
    text-indent: 20px;
  }
  .main-navigation .main-nav > ul ul ul ul > li > a {
    text-indent: 30px;
  }
}

There is no need to add the sub-menu classes to the elements.

April 5, 2021 at 8:27 am #1722236

Hi,

Thanks for your support. It's resolved.

I appreciate that.

Regards,
Melvin

April 5, 2021 at 12:23 pm #1722471

You're welcome

This archived topic is closed to new replies.

Start building better websites today.