-1

Could someone help me making right style for "nav-item px-7" for padding-left: 5rem !important;

 <li class="nav-item px-7">
        <NavLink class="nav-link" href="fetchdata">
            <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data aa
        </NavLink>
    </li>

Style below won't work at all:

.nav-item px-7 {
padding-left: 5rem !important;

}

Thanks in advance.

Joon

Joon w K
  • 777
  • 1
  • 6
  • 27

1 Answers1

2

Can you put in first ie write your px-7 before nav-item as a class name.

.nav-item px-7 {
padding-left: 5rem !important;

Your styling shown above seems not correct. In this situation you have, there are siblibgs class name which are px-7 and nav-item so you have to write when you style .px class follow codes below:

.px-7 {
padding-left: 5rem !important;
 }

Or you can write like this if you want to style two or more different class in a one row:

.nav-item, .px-7 {
padding-left: 5rem !important;
}
Ahmet Suhan Oka
  • 129
  • 4
  • He wants to style "nav-item px-7" - therefore he needs `.nav-item.px-7`... – JKD Jan 25 '21 at 07:56
  • He wants but there is no inner element class name as a px-7. Thats the point why his codes are not running. Am i right or not ? – Ahmet Suhan Oka Jan 25 '21 at 07:58
  • 1
    No, you are not right - There is a class called "px-7" and to solve the issue, he only needs to add a dot between `nav-item` and `px-7` - ergo: `.nav-item.px-7`. – JKD Jan 25 '21 at 08:12
  • Ok. I got you what you say. We both you and me in different thinking case. You are right. Yeah its just a simple dot problem :) – Ahmet Suhan Oka Jan 25 '21 at 08:41