0

I am newbie with html css and javascript and here is my problem.

In the styles.css, I code to hide the nav__mobile, using transform like this:

#nav__mobile {
  ... 
  transform: translateX(-100%);
}


* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-family: Arial, Helvetica, sans-serif;
}

.clear {
  clear: both;
}

.text-white {
  color: #fff !important;
}

.row {
  margin-left: -8px;
  margin-right: -8px;
}


/*the gia*/

.row::after {
  content: "";
  display: block;
  clear: both;
}

#main {}

#header {
  height: 46px;
  background-color: #000;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
}

#nav {
  display: inline-block;
}

#nav>li {
  display: inline-block;
}

#nav li {
  position: relative;
}

#nav>li>a {
  color: #fff;
  text-transform: uppercase;
}

#nav li a {
  text-decoration: none;
  line-height: 46px;
  padding: 0 24px;
  display: block;
}

#nav .subnav li:hover a,
#nav>li:hover>a {
  color: #000;
  background-color: #ccc;
}

#nav,
.subnav {
  list-style-type: none;
}

#nav li:hover .subnav {
  display: block;
}

#nav .subnav {
  display: none;
  position: absolute;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  min-width: 160px;
  top: 100%;
  left: 0;
}

#nav .subnav a {
  color: #000;
  padding: 0 16px;
}

#nav .nav-arrow-down {
  font-size: 16px;
}

#header .search-btn {
  float: right;
  padding: 12px 24px;
  position: absolute;
  top: 0;
  right: 12px;
}

#header .search-icon {
  color: #0fade9;
  font-size: 16px;
}

#header .search-btn:hover {
  background-color: #f44336;
  cursor: pointer;
}


/* mobile nav */

.nav_bars-btn {
  width: 28px;
  height: 28px;
  color: #fff;
  margin-left: 8px;
  margin-top: 4px;
  display: inline-block;
  display: none;
}

@media (max-width: 1023px) {
  .nav_bars-btn {
    display: inline-block;
  }
  #nav {
    display: none;
  }
}

.nav__overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
}

#nav__mobile {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 320px;
  max-width: 100%;
  background-color: #fff;
  transform: translateX(-100%);
}

.nav__mobile-close {
  width: 28px;
  height: 28px;
  color: #666;
  position: absolute;
  top: 1rem;
  right: 1rem;
}

.nav__mobile-link {
  text-decoration: none;
  color: #333;
  display: block;
  padding: 8px 0;
  font-size: 1.4rem;
}

.nav__input~h1 {
  color: red;
}
<div class="search-btn">
  <i class="search-icon ti-search fa fa-search"></i>
</div>

<input type="checkbox" name="" id="nav-mobile-input">
<div class="nav__overlay"></div>

<!-- navigation for mobile -->
<ul id="nav__mobile">
  <div class="nav__mobile-close">
    <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="times" class="svg-inline--fa fa-times fa-w-11" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512"><path fill="currentColor" d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"></path></svg>
  </div>
  <li><a href="#" class="nav__mobile-link">Home</a></li>
  <li><a href="#band" class="nav__mobile-link">Bane</a>
  </li>
  <li><a href="#tour" class="nav__mobile-link">Tour</a>
  </li>
  <li><a href="#contact" class="nav__mobile-link">Contact</a></li>
</ul>

so it hided the nav__mobile.

My problem is, when it displayed the checkbox, it is skewed as you can see in this picture. picture about my problem

So, could you please tell me why it happened? And how to solve this problem ? I want the check box to be the middle. Thank you very much for your time.

zer00ne
  • 41,936
  • 6
  • 41
  • 68
nguyencuc2286
  • 107
  • 1
  • 8
  • in the middle of what , vertically and/or horizontally ? – Mister Jojo Dec 17 '21 at 02:57
  • Need the rest of the CSS . By the looks of the pic you posted it looks like you have one or more external stylesheets ie `` – zer00ne Dec 17 '21 at 03:09
  • @zer00ne : sorry for my mistake, I have added all my css, could you please look again and tell me more about my problem ? – nguyencuc2286 Dec 17 '21 at 03:23
  • @nguyencuc2286 I have posted your code instead of going through the headache of trying to explain how to properly do it yourself. When you have the time I recommend you read about [mcve]. For the CSS just add the changes you did yourself in the CSS editor box and all of your external stylesheets within the HTML editor box: `` Make sure that the `href` are absolute paths: ex. `href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/fontawesome.min.css"` – zer00ne Dec 17 '21 at 04:47

1 Answers1

0

It is recommended to use display:none when hiding a div.

To hide a div only in mobile views, you can use media query.

https://getbootstrap.com/docs/4.0/layout/overview/

If you want to set the checkbox to the middle, maybe the concept of flexbox will help you.

It will be something like this.

<div style="width:100vw;display:flex;justify-content: center;">
    <input type="checkbox" name="" id="nav-mobile-input" />
</div>

https://getbootstrap.com/docs/4.0/utilities/flex/

Also, I recommend that you play Flexbox Froggy! You can learn more about how to display elements through the game.

https://flexboxfroggy.com/

seantsang
  • 1,123
  • 2
  • 7
  • 20