Twitter Bootstrap Question posted in

Resizing div with jQuery upon clicking a button-Twitter bootstrap

So I wanted to create a collapse-able side navbar for a webpage. The navbar is working as expected, but how can I get the div with the background image to resize upon clicking the menu icon? After collapsing the navbar, I want the background image to take up 100% width. I added some jQuery to toggle between classes on the element, but the div isn’t budging.

The code is also here

$(document).ready(function() {
  $('a').on('click', function() {
    $(this).parents().siblings().children().removeClass('active');
    $(this).addClass('active');
  });

 $('.menu-icon').on('click', function() {
    $('.nav-bar').toggleClass('hide-nav');
    $('main').toggleClass('expand-main');
 });
});
* {
  /*box-sizing: border-box; */
  padding: 0;
  margin: 0;
}

body, html {
  height: 100%;
  overflow: hidden; 
}

.main {
  background-image: url('http://hdimages.org/wp-content/uploads/2016/10/css-background-image-HD6-1.jpg');
  width: 75%;
  height: 100%;
  float: right;
  transition: .3s;
}

.nav-bar {
  background-color:   #4a235a;
  width: 25%;
  height: 100%;
  opacity: 0.9;
  transition: .3s;
}

ul {
  padding: 10% 30%;
  margin-top: 10%;
}

ul li {
  color: white;
  text-transform: uppercase;
  list-style-type: none;
  padding: 20%;
  border-bottom: solid 1px gray;
  font-size: 1.2em;
}

ul li:hover {
  color: gray;
  font-weight: bold;
}

h3 {
  font-family: Pacifico;
  padding: 3%;
  font-size: 1.3em;
  color: lemonchiffon;
  font-weight: bold;
}

.space {
  position: relative;
  left: 20px;
}

.active {
  color: navy;
  font-weight: bold;
}

.active:hover {
  color: navy;
  font-weight: bold;
}

h1 {
  font-family: Raleway;
  font-size: 2.6em;
  line-height: 1.4em;
  padding-left: 20%;
  padding-right: 20%;
  padding-top: 17%;
  padding-bottom: 4%;
  color: snow;
}

.button {
  color: white;
  font-size: 1.3em;
  text-align: center;
  border: solid 1px white;
  padding: 0.5em 0.7em;
}

.button:hover {
  color: #2c3e50;
  background-color:  #c39bd3;
  opacity: 0.9;
  border: solid 1px #c39bd3;
}

a {
  color: white;
  font-family: Muli;
}

a:hover {
  color: gray;
  text-decoration: none;
}


.menu-icon {
  width: 2.5%;
  margin: 1.2%;
  padding: 0.05% 0.02%;
}

img:hover {
  /*border: solid 1px #17202a;
  border-radius: 0.5em;*/
}

.hide-nav {
  transform: translateX(-100%);
}

.expand-main {
  transform: translateX(-25%);
  width: 100%;
}


@media (min-width: 1024px) and (max-width: 1150px) {
    h1 {
        margin-top: 5%;
        font-size: 2.3em;
    }
    
    .button {
       font-size: 1.1em;
    }
}
@media (min-width: 800px) and (max-width: 1000px) {
  h1 {
    margin-top: 12%;
    font-size: 2em;
  }
  
  .button {
    font-size: 1em;
    margin-top: 20%;
  }
    
  ul li {
    font-size: 0.9em;
  }
}

@media (max-width: 800px) {
  h1 {
    margin-top: 20%;
    font-size: 1.8em;
  }
  
  .button {
    font-size: 0.9em;
    margin-top: 20%;
  }
  
  ul li {
    font-size: 0.7em;
  }
  
  h3 {
    font-size: 0.8em;
  }
}

@media (max-width: 600px) {
  .main {
    width: 100%;
  }
  
  .nav-bar {
    display: none;
  }
  
  .menu-icon {
    display: none;
  }
  
  h1 {
    margin-top: 30%;
  }
}
<!DOCTYPE html>
<html>
  <head>
  <meta charset="UTF-8">
  <title>Website Template 3 with Navbar</title>

  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css'>

  <link rel="stylesheet" href="gabsTechSpace.css">

  <link href="https://fonts.googleapis.com/css?family=Raleway" type="text/css" rel="stylesheet">
      
  <link href="https://fonts.googleapis.com/css?family=Muli" type="text/css" rel="stylesheet">
      
  <link href="https://fonts.googleapis.com/css?family=Pacifico" type="text/css" rel="stylesheet">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
<div class="main">
  <a href=#><img class="menu-icon" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/30/Ic_menu_36px.svg/2000px-Ic_menu_36px.svg.png"></a>
  <h1 class="text-center">Hello! My name is <span>Gabby</span> and I create beautiful, professional, and responsive websites.</h1>
  <center><a class="button text-center" href="#"><span class="learn-more">Learn More</span></a></center>
</div>

<div class="nav-bar">
    <a href=#><h3>Gab's Tech <br><span class="space">Space</span></h3></a>
  <ul class="text-center">
    <li><a href=# class="active">Home</a></li>
    <li><a href=#>About</a></li>
    <li><a href=#>Projects</a></li>
    <li><a href=#>Contact</a></li>
  </ul>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>

  <script  src="gabsTechSpace.js"></script>

</body>
</html>
Tags:

4

Answers


  1. 0

    Add the background image to a parent container which takes up the whole width of the page, for example the body. Then add a background size of cover:

    https://codepen.io/alexplummer/pen/LOVzKN

    body {
background: url(..image.jpg);
background-size: cover;
}
    Login or Signup to reply.
  2. 0

    The only change needed was the main selector from 'main'to'.main'

    $(document).ready(function() {
  $('a').on('click', function() {
    $(this).parents().siblings().children().removeClass('active');
    $(this).addClass('active');
  });

 $('.menu-icon').on('click', function() {
    $('.nav-bar').toggleClass('hide-nav');
    $('main').toggleClass('expand-main');
 });
});

    https://codepen.io/anon/pen/zPGPGY

    Login or Signup to reply.
  3. 0

    1.There is a typo error in the js code,

        $('.menu-icon').on('click', function() {
    $('.nav-bar').toggleClass('hide-nav');
    $('.main').toggleClass('expand-main'); /*Add .main to toggleClass*/
    });

    2.After correcting that remove transform property from 

    .expand-main {
     /*transform: translateX(-25%); remove this*/
     width: 100%;
   }
    Login or Signup to reply.
  4. 0

    In JQ you use main . But main is a class so use .main instead.

    Also do not use translateX on the expand-main. increasing it’s width to 100% it’s enough

    See snippet below

    $(document).ready(function() {
  $('a').on('click', function() {
    $(this).parents().siblings().children().removeClass('active');
    $(this).addClass('active');
  });

  $('.menu-icon').on('click', function() {
    $('.nav-bar').toggleClass('hide-nav');
    $('.main').toggleClass('expand-main');
  });
});
    * {
  /*box-sizing: border-box; */
  padding: 0;
  margin: 0;
}

body,
html {
  height: 100%;
  overflow: hidden;
}

.main {
  background-image: url('http://hdimages.org/wp-content/uploads/2016/10/css-background-image-HD6-1.jpg');
  width: 75%;
  height: 100%;
  float: right;
  transition: .3s;
}

.nav-bar {
  background-color: #4a235a;
  width: 25%;
  height: 100%;
  opacity: 0.9;
  transition: .3s;
}

ul {
  padding: 10% 30%;
  margin-top: 10%;
}

ul li {
  color: white;
  text-transform: uppercase;
  list-style-type: none;
  padding: 20%;
  border-bottom: solid 1px gray;
  font-size: 1.2em;
}

ul li:hover {
  color: gray;
  font-weight: bold;
}

h3 {
  font-family: Pacifico;
  padding: 3%;
  font-size: 1.3em;
  color: lemonchiffon;
  font-weight: bold;
}

.space {
  position: relative;
  left: 20px;
}

.active {
  color: navy;
  font-weight: bold;
}

.active:hover {
  color: navy;
  font-weight: bold;
}

h1 {
  font-family: Raleway;
  font-size: 2.6em;
  line-height: 1.4em;
  padding-left: 20%;
  padding-right: 20%;
  padding-top: 17%;
  padding-bottom: 4%;
  color: snow;
}

.button {
  color: white;
  font-size: 1.3em;
  text-align: center;
  border: solid 1px white;
  padding: 0.5em 0.7em;
}

.button:hover {
  color: #2c3e50;
  background-color: #c39bd3;
  opacity: 0.9;
  border: solid 1px #c39bd3;
}

a {
  color: white;
  font-family: Muli;
}

a:hover {
  color: gray;
  text-decoration: none;
}

.menu-icon {
  width: 2.5%;
  margin: 1.2%;
  padding: 0.05% 0.02%;
}

img:hover {
  /*border: solid 1px #17202a;
  border-radius: 0.5em;*/
}

.hide-nav {
  transform: translateX(-100%);
}

.expand-main {
  width: 100%;
}

@media (min-width: 1024px) and (max-width: 1150px) {
  h1 {
    margin-top: 5%;
    font-size: 2.3em;
  }
  .button {
    font-size: 1.1em;
  }
}

@media (min-width: 800px) and (max-width: 1000px) {
  h1 {
    margin-top: 12%;
    font-size: 2em;
  }
  .button {
    font-size: 1em;
    margin-top: 20%;
  }
  ul li {
    font-size: 0.9em;
  }
}

@media (max-width: 800px) {
  h1 {
    margin-top: 20%;
    font-size: 1.8em;
  }
  .button {
    font-size: 0.9em;
    margin-top: 20%;
  }
  ul li {
    font-size: 0.7em;
  }
  h3 {
    font-size: 0.8em;
  }
}

@media (max-width: 600px) {
  .main {
    width: 100%;
  }
  .nav-bar {
    display: none;
  }
  .menu-icon {
    display: none;
  }
  h1 {
    margin-top: 30%;
  }
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
  <a href=#><img class="menu-icon" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/30/Ic_menu_36px.svg/2000px-Ic_menu_36px.svg.png"></a>
  <h1 class="text-center">Hello! My name is <span>Gabby</span> and I create beautiful, professional, and responsive websites.</h1>
  <center><a class="button text-center" href="#"><span class="learn-more">Learn More</span></a></center>
</div>

<div class="nav-bar">
  <a href=#><h3>Gab's Tech <br><span class="space">Space</span></h3></a>
  <ul class="text-center">
    <li><a href=# class="active">Home</a></li>
    <li><a href=#>About</a></li>
    <li><a href=#>Projects</a></li>
    <li><a href=#>Contact</a></li>
  </ul>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search