Plesk Question posted in
The official documentation for Plesk Obsidian can be found here.

Responsive Menu (Bootstrap) – Buttons inline – Plesk

I have two Buttons on the right side of my navbar, in the responsive menu the buttons are arranged among themselves.

Is it possible to make the Buttons inline, so the two buttons are on top in the first row.

            <ul class="nav navbar-nav navbar-right">
                <li>
                    <p class="navbar-btn btn-space btn-top-space">
                        <a href="https://url.com" target="_blank" title="Customer Payment Panel (CPP)" class="btn-sm btn-info">
                            <span class="glyphicon glyphicon-user"></span> <strong>Customer Panel</strong> (CPP)
                        </a>
                    </p>
                </li>
                <li>
                    <p class="navbar-btn btn-top-space">
                        <a href="https://url.com" target="_blank" title="Control Panel (Plesk)" class="btn-sm btn-success">
                            <span class="glyphicon glyphicon-cog"></span> <strong>Control Panel</strong> (Plesk)
                        </a>
                    </p>
                </li>
            </ul>
Tags:

2

Answers


  1. 0

    use this may help u

    <ul class="nav navbar-nav navbar-right">
                <li>
                    <span class="navbar-btn btn-space btn-top-space">
                        <a href="https://url.com" target="_blank" title="Customer Payment Panel (CPP)" class="btn-sm btn-info">
                            <span class="glyphicon glyphicon-user"></span> <strong>Customer Panel</strong> (CPP)
                        </a>
                    </span>
                       <span class="navbar-btn btn-top-space">
                        <a href="https://url.com" target="_blank" title="Control Panel (Plesk)" class="btn-sm btn-success">
                            <span class="glyphicon glyphicon-cog"></span> <strong>Control Panel</strong> (Plesk)
                        </a>
                    </span>
                </li>
            </ul>
    Login or Signup to reply.
  2. 0

    You can try like this.

    You have to add custom media style.

    Css-

    @media (max-width: 767px) {
    .nav.top-nav  li{
        display:inline-block;
    }
}

    Html –

     <ul class="nav top-nav navbar-nav navbar-right">
    <li>
        <p class="navbar-btn btn-space btn-top-space">
            <a href="https://url.com" target="_blank" title="Customer Payment Panel (CPP)" class="btn-sm btn-info">
                <span class="glyphicon glyphicon-user"></span> <strong>Customer Panel</strong> (CPP)
            </a>
        </p>
    </li>
    <li>
        <p class="navbar-btn btn-top-space">
            <a href="https://url.com" target="_blank" title="Control Panel (Plesk)" class="btn-sm btn-success">
                <span class="glyphicon glyphicon-cog"></span> <strong>Control Panel</strong> (Plesk)
            </a>
        </p>
    </li>
</ul>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search