CSS to Jquerry

Support
#1

Hey!

Please could you help me?

i have a problem on my website when it shows on mobile view

the wpadminbar is not pushing down the other menues there for i want to make a Jquerry code that will command “if user is logged in then position menues in 35px top”

so this is the Jquerry code i found:

var data = {
    action: 'is_user_logged_in'
};

jQuery.post(ajaxurl, data, function(response) {
    if(response == 'yes') {
        // user is logged in, do your stuff here
    } else {
        // user is not logged in, show login form here
    }
});

and i want to perform this CSS as in JQuerry in the position of where user is logged in:

@media (max-width: 1200px) {
#sfm-mob-navbar {
    top: 35px;
}
}
@media (max-width: 1200px) {
.x-navbar.x-navbar-fixed-top {
    position: fixed;
    top: 35px;
  right: 5%;
  width: 36%;
  z-index:999;
}
}

Any idea what i should do?
This is how the website shows in mobile when user is not logged in: http://prntscr.com/jppatk
There is an empty space because the user is not logged in and i wish it to now be shown.

#2

Hello There,

You do not need a JS code if you want to apply a custom css when only you are logged in. You can simply update the code and use this:

@media (max-width: 1200px) {
  .logged-in  #sfm-mob-navbar {
    top: 35px;
  }
}
@media (max-width: 1200px) {
  .logged-in  .x-navbar.x-navbar-fixed-top {
    position: fixed;
    top: 35px;
    right: 5%;
    width: 36%;
    z-index:999;
  }
}

Please let us know if this works out for you.

#3

Thats great! but i want to set the top to 0px when user is logged out. so is this the code? :slight_smile:

@media (max-width: 1200px) {
.logged-out  #sfm-mob-navbar {
    top: 0px;
  }
}
@media (max-width: 1200px) {
.logged-out  .x-navbar.x-navbar-fixed-top {
    position: fixed;
    top: 0px;
    right: 5%;
    width: 36%;
    z-index:999;
  }
}
#4

Hey There,

You will need this code:

@media (max-width: 1200px) {
 body:not(.logged-in)  #sfm-mob-navbar {
    top: 0px;
  }
}
@media (max-width: 1200px) {
 body:not(.logged-in)  .x-navbar.x-navbar-fixed-top {
    position: fixed;
    top: 0px;
    right: 5%;
    width: 36%;
    z-index:999;
  }
}

Hope this helps. Please let us know how it goes.

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.