CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Opeyemi Odedeyi
Opeyemi Odedeyi

Reputation: 770

Trying to move expanding navbar from the right side to the left side

This is the HTML code for the expanding nav bar, it is from a template I am editing, I have been able to move the nav menu bar to the left and when I click on it, it expands on the right side which I am trying to fix and move it to expand on the left side too.

<div class="jumbotron home home-fullscreen" id="home">
    <div class="mask"></div>

<a href="" class="menu-toggle" id="nav-expander"><i class="fa fa-bars">
</i></a>
    <!-- Offsite navigation -->
    <nav class="menu">
        <a href="#" class="close"><i class="fa fa-close"></i></a>
        <h3> <a href="index.html"> spacecurb </a> </h3>
        <ul class="nav">
            <li><a data-scroll href="#home">Apartment</a></li>
            <li><a data-scroll href="#services">Hostel</a></li>
            <li><a data-scroll href="#portfolio">Room Rent</a></li>
            <li><a data-scroll href="#contact">Work Spaces</a></li>
            <li><a data-scroll href="#contact">hotels</a></li>
            <li><a data-scroll href="#contact">sign up</a></li>
            <li><a data-scroll href="#contact">log in</a></li>
            <li><a data-scroll href="#contact">about</a></li>
            <li><a data-scroll href="#contact">contact</a></li>
            <li><a data-scroll href="#contact">help</a></li>
            <li><a data-scroll href="#contact">add property</a></li>
        </ul>
        <ul class="social-icons">
            <li><a href=""><i class="fa fa-facebook"></i></a></li>
            <li><a href=""><i class="fa fa-twitter"></i></a></li>
        </ul>
    </nav>

and this is the CSS code, I was able to move the expanding nav bar to the left, but it expands at the right

.menu-toggle{
position: absolute;
left: 15px; 
top: 15px;
font-size: 30px;
color: #fff;
}

.menu{
width: 300px;
display: block;
background: #333;
height: 100%;
top: 0;
right:-300px;
position: fixed;
z-index: 100;
text-align: center;
transition: right 0.4s;
}

.menu.nav-expanded{
right: 0;
}

.menu .close{
color: #fff;
margin-right: 10px;
margin-top:10px;
}

Upvotes: 2

Views: 1592

Answers (1)

Farzin Kanzi
Farzin Kanzi

Reputation: 3435

You have 

.menu{
   width: 300px;
   right: -300px;
 }

.menu.nav-expanded{
  right: 0;
}

It means that your menu is out of screen (right) and when it expanded it come to page at position right:0.

Now if you want it go to left side in expand mode, remove right:0 and set:

.menu.nav-expanded{
  left: 0;
}

To close menu by clicking on the normal screen add this jquery script block:

<script>

    $(document).ready(function ()
    {
        $(document).click(function (e)
        {
            if (!$(e.target).hasClass('menu-toggle') && !$(e.target).closest('.menu').hasClass('menu'))
                $('.menu').removeClass('nav-expanded');
        });
    });
</script>

Upvotes: 1

Related Questions