Hide a title - Code CSS

App Development
1

Hi, I would like to hide the menu link “Team” and its icon on the Login page. Do you have a CSS code that corresponds to my request ? (see yellow box on the picture)
@Chem

Thank you in advance.

Tadabse Photo
Tadabse Photo1206×514 8.66 KB

2

@FranckMullerGeneve where’s the picture? I can help on CSS.

3

@TadaMan Hi, you can find the screenshot in my post, I highlighted in yellow in the top right corner.

I want to hide the menu link “Team” and its corresponding icon, only when the user is not logged in.

Or if it’s not possible, hide when the user is on the login page.

Thank you !

4

@FranckMullerGeneve go to LOGIN → SETTINGS → remove login to any layout so when it’s just login page it doesn’t have MENU.

5

@FranckMullerGeneve in this way, you’ll only have the LOGIN PAGE.

image
image1609×865 86.5 KB

6

@FranckMullerGeneve let us know if you’ve made it to work.

7

@TadaMan Thank you for your reply, but I would like to hide specifically the “Team” menu link because in the future I will add other menu links.
Is there a way to specifically target this name or the nth link to the right ?

Thanks,

8

First: Access to the element html
Second: With javascript use css api for hide the element

image
image1504×377 43.7 KB

9

Hi @FranckMullerGeneve

We recommend creating more than one menu per layout if you’re looking to hide specific parts of a menu based on logged in user status or logged in user role.

By adding a second menu to a new row, you can independently change row visibility based on logged in user status or role. For example, one menu can be public while another menu is hidden to anyone who is not logged in.

2 Likes
10

Hey @FranckMullerGeneve,

Tim has the real platform answer.

However, if you’re looking for a bit of code to hide an item if the user is not logged in, you can use the following code.

But first, I need to show you how to copy a specific selector. See the image below.

image
image1719×1251 260 KB

You will need the selector you copied in the JavaScript code below.

Copy and paste the following code into the JavaScript section of the page and remember to change ‘PASTE_SELECTOR_HERE’ with the selector you copied above.

var selector = 'PASTE_SELECTOR_HERE';
$(function(){
    var loggedInUser = '{loggedInUser.Name}';
    if(!loggedInUser){
        console.log('Not Logged In');
        $(selector).css('display','none');
    }
});
11

Hi @Chem,
I am coming back to you because now I want to hide the Client POS and Team titles. So I followed your advice and used the Javascript below for both titles, which gives the following :
var selector = ‘#navbar_x_element_layout_1_10 > ul > li:nth-child(8)’;
$(function(){
var loggedInUser = ‘{loggedInUser.Name}’;
if(!loggedInUser){
console.log(‘Not Logged In’);
$(selector).css(‘display’,‘none’);
}
});

var selector = ‘#navbar_x_element_layout_1_10 > ul > li:nth-child(9)’;
$(function(){
var loggedInUser = ‘{loggedInUser.Name}’;
if(!loggedInUser){
console.log(‘Not Logged In’);
$(selector).css(‘display’,‘none’);
}
});

But the latter doesn’t work (see screen recording), it just hides one title but not both. Do you have another code to advise me?

Thanks in advance,

giphy

12

Hey @FranckMullerGeneve

The following should work for your case.

var selector1 = '#navbar_x_element_layout_1_10 > ul > li:nth-child(8)';
var selector2 = '#navbar_x_element_layout_1_10 > ul > li:nth-child(9)';
$(function(){
    var loggedInUser = '{loggedInUser.Name}';
    if(!loggedInUser){
        console.log('Not Logged In');
        $(selector1).css('display','none');
        $(selector2).css('display','none');
    }
});
2 Likes