floating button issue in material css

问题

I have designed a side nav bar but floating button along with text are not working. floating button css is not working as expected. Also I am facing some issue with round circle image. Its always come as oval shape even if I am using circle class.

attaching the view as image.

Side Nav Bar html:

<ul id="slide-out" class="side-nav fixed invesible-top ">
        <li>
            <div class="user-view">
                <div class="background">
                    <img
                        src="">
                </div>
                <a href="#user"><img class="circle"
                        src=""></a>
                <a href="#name"><span class="white-text name">John Doe</span></a>
                <a href="#email"><span class="white-text email">Publisher</span></a>
            </div>
        </li>
        <li><a href="#!"><i class="material-icons teal-text">person</i>My Profile</a></li>
        <li>
            <div class="divider"></div>
        </li>
        <li><a class="waves-effect" href="#!"><i class="material-icons teal-text">edit</i>Edit Profile</a></li>
        <li>
            <div class="divider"></div>
        </li>
        <li><a class="waves-effect btn-floating red small" href="#!"><i class="material-icons white-text">add</i>Test</a></li>
        <li>
            <div class="divider"></div>
        </li>
        <li><a class="waves-effect " href="#!"><i class="material-icons teal-text">add</i>Create Page</a></li>
        <li>
            <div class="divider"></div>
        </li>
        <li><a class="waves-effect " href="#!"><i class="material-icons teal-text">event</i>Create Event</a></li>
        <li>
            <div class="divider"></div>
        </li>
        <li><a class="waves-effect " href="#!"><i class="material-icons teal-text">call</i>Invite People</a></li>
        <li>
            <div class="divider"></div>
        </li>
        <li><a class="waves-effect " href="#!"><i class="material-icons teal-text">power_settings_new</i>Sign Out</a></li>
    </ul>

style is:

 @media only screen and (min-width : 992px) {
    .invesible-top {
      top: 105px;
    }
  }

来源：https://stackoverflow.com/questions/63997945/floating-button-issue-in-material-css

标签

css

material-ui

materialize