Apply CSS to URL

Asked

Viewed 42 times

0

When I’m on /start CSS header Nav ul li . submenu must be top:300px, on the other pages should be top:120px. I put inside the $(Document). ready(Function() { }); the following expression:

$("a[href='/inicio]").find("header nav ul li .submenu").css("top", "300px!important");

But it’s not working. The CSS is like this:

header nav ul li .submenu {
    background: #f3f3f3;
    border-top: 2px solid #ffae11;
    border-radius: 3px;
    box-shadow: 0 8px 12px rgba(0,0,0,0.2);
    display: none;
    font-size: 0;
    padding: 15px 25px;
    position: absolute;
    top: 120px;
    left: 0;
    width: 100%;
    margin-left: 0;
    z-index: 2000;
}
jquery css
  • 1

    You don’t need that Important, Important is only used when the DOM is being loaded. jquery will change anyway. That doesn’t solve the problem I know, but it’s already an initiative

  • Thanks, I’ll take it off.

  • In fact you may even solve, given that the ! Mportant was misplaced and could be disturbing the instruction

  • I took the !Important but it’s not working yet.

  • At a glance at my answer, you possess other style in the . submenu? within other elements or there is only one style for the .submenu?

  • If you want to change the css on a single page it is much easier to put an id there and in the css change by id deichando id code after normal not to be about written

Show 1 more comment

1 answer

1


Well, let’s try to solve it in an easy way ok?

I believe that this /beginning be the main page of your correct website?

So you have created an instruction that detects whether or not it is the main page through the link. Let’s change that? Let’s go.

To detect whether or not it is the main page you can add in the tag <body> of your page that information! Follow the example.

in HTML add:

<body class='principal'>

I particularly prefer working using classes

Well, now in Jquery we will make a function that looks for the information present in the body. See:

$(document).ready(function(){

   if($('body').hasClass('principal')) 
   {
      $("header nav ul li .submenu").css("top", "300px");
   }

});

Browser other questions tagged jquery css

You are not signed in. Login or sign up in order to post.