register

Hi,

The HTML can be used by adding a HTML element from the left bar of Elementor, search HTML in the bar for ease.

The HTML for the login button is as follows

<a href="#" class="facebook_connect radius button facebook"><i class="icon-facebook-sign"></i> &nbsp;Log In With Facebook</a>

Thanks,

Kieran

Hi,

Currently there is not a way within Elementor to limit the view of an item. I am also unaware of any third party plugin that adds this functionality to Elementor.

Edit: Feel free to add your name to a list of other Elementor users requesting the same functionality https://github.com/pojome/elementor/issues/1592

Thanks,

Kieran

Hi,

The full HTML output for the elements you highlighted is as follows

<div class="eight columns login-buttons">
    <ul class="button-group radius right">

        <li class="header-login-button">
            <a href="#" data-reveal-id="login_panel" class="tiny secondary button radius">
                <i class="icon-user hide-for-medium-down"></i>
                LOG IN </a>
        </li>

        <li class="header-register-button">
            <a href="#" data-reveal-id="register_panel" class="tiny button radius">
                <i class="icon-group hide-for-medium-down"></i>
                SIGN UP </a>
        </li>

    </ul>
</div>

Thanks,

Kieran

Hi,

As explained in my earlier reply, this is static output, it is not dynamic and will not respond in that way when used as HTML.

There is no shortcode to add modal or menu content other than where it appears in the theme header already.

Thanks,

Kieran

Hi,

I’d need to be logged in to generate the specific HTML for your site with the profile button. Please update this ticket, in a private reply, with login credentials for your site so I can send this to you.

Thanks,

Kieran

Hi,

The full HTML output for the logged in buttons, both profile and logout, is as follows

<div class="eight columns login-buttons">
    <ul class="button-group radius right">

        <li class="relative btn-profile">

            <div href="#" class="tiny secondary button split dropdown" data-options="is_hover:true">

                <a href="https://www.eumello.com/members/admin/" class="tiny secondary button radius">
                    <i class="icon-user hide-for-medium-down"></i>
                    PROFILE </a>
                <span></span>
                <div class="kleo-notifications">
                </div>
                <ul class="no-hover" style="top: 23px;">
                    <li><a href="https://www.eumello.com/members/admin/activity/">Activity</a></li>
                    <li><a href="https://www.eumello.com/members/admin/settings/">Settings</a></li>
                </ul>

            </div>

        </li>

        <li>
            <a href="https://www.eumello.com/login/?action=logout&redirect_to=https%3A%2F%2Fwww.eumello.com&_wpnonce=decd2c9c6c "
                class="tiny button radius btn-logout">
                <i class="icon-off hide-for-medium-down"></i>
                LOG OUT </a>
        </li>

    </ul>
</div>

Note: You will obviously need to update any href=”” value that you wish to use as these are specific to an account

Thanks,

Kieran

Hi,

If you use Elementor to build a header it will completely remove the header for the page(s) you define regardless of device. Therefore it isn’t possible to sent you CSS to only hide the header on mobile.

Kieran

Hi,

The CSS to hide the menu on the home page for mobiles only would be as follows

@media screen and (max-width: 765px) {
.home-page header {
    display: none;
}
}

Thanks,

Kieran

Hi,

This is not from SweetDate, it’s an element of either Elementor or one of your menus. You should adjust it there.

Thanks,

Kieran

Hi,

Removing menu items on a per device basis is going to be tricky for any amount of items. You can actually do it with the method I show below. This is not an issue with the theme but a question of development, and is not something we can do for you as a back and forth within the scope of the support offered with the theme.

@media screen and (max-width: 765px) {
li.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-1274 {
    display: none;
}
}

If you want to do this with other menu items you’ll need to duplicate that CSS from in-between the media query and change the menu item ID, you can get this by right clicking the menu item.

Thanks,

Kieran

Hi,

You’re welcome. Feel free to open a new topic with any other questions or issues and one of the available support team members will be happy to assist.

All the best,

Kieran