Hide and Show items when user logged in and logged out

Question

I have the following code when the user is logged out:

<div class="fusion-secondary-main-menu">
       <div class="fusion-row">
            <?php avada_main_menu(); ?>
            <?php avada_mobile_menu_search(); ?>
       <ul id="odp-main-menu-right" class="odp-pl-0">
            <li class="#">
                 <a href=""><i class="far fa-bell odp-mr-1">
                 </i>0</a>
            </li>
            <li id="upload-ad" class="not-logged-in">
                <a href="<?php echo wp_login_url(trailingslashit(home_url($wp->request)));?>"
                style="color: #fff;">
                NEW ADVERT
                </a>
            </li>
       </ul>
</div>

However when the user is logged out it must hide the following and when logged in show the following on the front-end:

<li class="#">
    <a href=""><i class="far fa-bell odp-mr-1">
    </i>0</a>
</li>

I've used a CSS class to add display:none on a class not-logged-in but when logged in, but it is still gone.

When logged in, the wp_login_url must also be replaced by a clickable ID element

Answer 1

You can use this.

<?php if(is_user_logged_in()){ ?>
    //Your HTML here needs to be shown when the user is logged in.
<?php } ?>