Is there a way to make the text works normally?

Question

So I'm trying to make an easy website for a server user ordering stuffs. But now I have a problem that will affect about the Navigator text.

Now it's looks like this:

As you can see in the code below, there should be a navigator text above the Back button and also the Categories button below should be shows like the back and prices button above too since they're the same code.

I tried for some other way but it's kinda out my coding range so I decide to find on Google but I don't find any helpful solve.

Is that actually can be fix?

Conclusion: problem

"Navigator" text disappear at 100% zoom view
Category buttons can't shows like buttons above (same codes as buttons above but different ID)

.title {
  color: #66d4ff;
  background-color: #444444;
  font-size: 62px;
  text-align: center;
  border: solid 10px #66d4ff;
  padding: 50px;
  margin-left: 302px;
}

body {
  background: #444444;
}

button {
  color: #66d4ff;
  background: #444444;
  font-size: 30px;
  font-family: 'Times New Roman', Times, serif;
}

a {
  color: #66d4ff
}

nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 300px;
  height: 100%;
  background: #4a4a4a;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-right: solid 2px #ffffff;
  overflow-y: scroll;
}

.nav::-webkit-scrollbar {
  display: hidden;
}

main {
  color: #66d4ff;
  background-color: #444444;
  font-size: 20px;
}

.navigator {
  display: block;
  margin-bottom: 50px;
  color: #66d4ff;
  font-size: 35px;
  text-align: center;
}

.store {
  padding: 0 99.5px 0 99.5px;
  display: block;
  margin-top: 25px;
  margin-bottom: 25px;
}

.prices {
  padding: 0 93.5px 0 93.5px;
  display: block;
  margin-top: 25px;
  margin-bottom: 25px;
}

.Woods {
  padding: 0 80px 0 80px;
  display: block;
  margin-top: 25px;
  margin-bottom: 25px;
}

.Stones {
  padding: 0 80px 0 80px;
  display: block;
  margin-top: 25px;
  margin-bottom: 25px;
}

.Brewing {
  padding: 0 80px 0 80px;
  display: block;
  margin-top: 25px;
  margin-bottom: 25px;
}

.Enchanting {
  padding: 0 80px 0 80px;
  display: block;
  margin-top: 25px;
  margin-bottom: 25px;
}

.Color {
  padding: 0 80px 0 80px;
  display: block;
  margin-top: 25px;
  margin-bottom: 25px;
}

.Nether {
  padding: 0 80px 0 80px;
  display: block;
  margin-top: 25px;
  margin-bottom: 25px;
}

.Redstone {
  padding: 0 80px 0 80px;
  display: block;
  margin-top: 25px;
  margin-bottom: 25px;
}

<main>
  <div class="title">
    <t1>MineGlobe | IchorDragon's Store</t1>
  </div>
</main>

<nav>

  <div id="navigator">
    <p class="navigator">Navigator</p>

    <div>
      <button class="store"><a href="store.html" style="text-decoration: none;">Back</a></button>
      <button class="prices"><a href="prices.html" style="text-decoration: none;">Prices</a></button>
    </div>
  </div>

  <div id="category">
    <p class="navigator">Select Category</p>

    <div>
      <button class="Woods" onclick="document.getElementById('Woods').scrollIntoView();"><a style="text-decoration: none;">Woods</a></button>
      <button class="Stones" onclick="document.getElementById('Stones').scrollIntoView();"><a style="text-decoration: none;">Stones</a></button>
      <button class="ArmorsWeapon" onclick="document.getElementById('ArmorsWeapon').scrollIntoView();"><a style="text-decoration: none;">Armors & Weapons</a></button>
      <button class="Brewing" onclick="document.getElementById('Brewing').scrollIntoView();"><a style="text-decoration: none;">Brewing</a></button>
      <button class="Enchanting" onclick="document.getElementById('Enchanting').scrollIntoView();"><a style="text-decoration: none;">Enchanting</a></button>
      <button class="Color" onclick="document.getElementById('Color').scrollIntoView();"><a style="text-decoration: none;">Color</a></button>
      <button class="Redstone" onclick="document.getElementById('Redstone').scrollIntoView();"><a style="text-decoration: none;">Redstone</a></button>
      <button class="Nether" onclick="document.getElementById('Nether').scrollIntoView();"><a style="text-decoration: none;">Nether</a></button>
    </div>
  </div>

</nav>

It's a bit unclear what you want. What do you mean by "behave normally" ? — Kokodoko, Nov 20 '21 at 11:14
You should hire a designer for your page, or read through https://developer.apple.com/design/human-interface-guidelines/ and https://material.io/ and practice what they teach. — Rickard Elimää, Nov 20 '21 at 15:26

score 1 · Answer 1 · answered Nov 20 '21 at 11:52

I honestly can't explain all the changes made, there are too many. My attempt was to clean up your code and give you a working layout (hopefully that's what you were looking for).

In 2021 there are better layouts compared to fixed menu (with grids for example), which work better in responsive and are more clean. But it would require an in-depth study that's up to you.

body {
    background-color: #444444;
}
main {
    width: 100%;
    padding-left: 302px;
    box-sizing: border-box;
    overflow:hidden;
  
    color: #66d4ff;
    background-color: #444444;
    font-size: 20px;
    
}

.title {
    padding: 50px;
    
    border: solid 10px #66d4ff;
    
    font-size: 62px; 
    text-align: center;
}

nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 300px;
    height: 100%;
    
    background-color: #4a4a4a;
    border-right: solid 2px #ffffff;
    overflow-y: scroll;
    
    color: #66d4ff;
}


.navigator {
    display: block;
    margin-bottom: 50px;
    
    font-size: 35px;
    text-align: center;
}


button {
    width:96%;
    margin: 10px auto;
    
    background: #444444;
    
    color: #66d4ff;
    font-size: 30px;
    font-family: 'Times New Roman', Times, serif;
    
    cursor:pointer;
}

<body>

  <main>
    <div class="title">
      <t1>MineGlobe | IchorDragon's Store</t1>
    </div>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> This is a long page content...
    <br/>
  </main>

  <nav>

    <div id="navigator">
      
      <p class="navigator">Navigator</p>

      <div>
        <a href="store.html" class="store" style="text-decoration: none;"><button>Back</button></a>
        <a href="prices.html" class="prices" style="text-decoration: none;"><button>Prices</button></a>
      </div>
      
    </div>



    <div id="category">
    
      <p class="navigator">Select Category</p>

      <div>
        <button class="Woods items" onclick="document.getElementById('Woods').scrollIntoView();">Woods</button>
        <button class="Stones items" onclick="document.getElementById('Stones').scrollIntoView();">Stones</button>
        <button class="ArmorsWeapon items" onclick="document.getElementById('ArmorsWeapon').scrollIntoView();">Armors & Weapons</button>
        <button class="Brewing items" onclick="document.getElementById('Brewing').scrollIntoView();">Brewing</button>
        <button class="Enchanting items" onclick="document.getElementById('Enchanting').scrollIntoView();">Enchanting</button>
        <button class="Color items" onclick="document.getElementById('Color').scrollIntoView();">Color</button>
        <button class="Redstone items" onclick="document.getElementById('Redstone').scrollIntoView();">Redstone</button>
        <button class="Nether items" onclick="document.getElementById('Nether').scrollIntoView();">Nether</button>
      </div>
      
    </div>


  </nav>

</body>

thanks but when I copy them in the css for test, the button (back and prices) cant change to the blue color (#66d4ff) — Ichor Dragon, Nov 23 '21 at 03:56

Cedric Cholley · Answer 2 · 2021-11-20T15:18:57.077

"Navigator" text disappear: This is because justify-content: center; on the nav
Buttons will not take a width of 100% even with display: block (more information), so it needs to be added. Note that since all cathegories have the same code a single class is enough.

.title {
  color: #66d4ff;
  background-color: #444444;
  font-size: 62px;
  text-align: center;
  border: solid 10px #66d4ff;
  padding: 50px;
  margin-left: 302px;
}

body {
  background: #444444;
}

button {
  color: #66d4ff;
  background: #444444;
  font-size: 30px;
  font-family: 'Times New Roman', Times, serif;
}

a {
  color: #66d4ff
}

nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 300px;
  height: 100%;
  background: #4a4a4a;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* justify-content: center; */
  border-right: solid 2px #ffffff;
  overflow-y: scroll;
}

.nav::-webkit-scrollbar {
  display: hidden;
}

main {
  color: #66d4ff;
  background-color: #444444;
  font-size: 20px;
}

.navigator {
  display: block;
  margin-bottom: 50px;
  color: #66d4ff;
  font-size: 35px;
  text-align: center;
}

.store {
  padding: 0 99.5px 0 99.5px;
  display: block;
  margin-top: 25px;
  margin-bottom: 25px;
}

.prices {
  padding: 0 93.5px 0 93.5px;
  display: block;
  margin-top: 25px;
  margin-bottom: 25px;
}

.category {
  padding: 0 80px 0 80px;
  display: block;
  margin-top: 25px;
  margin-bottom: 25px;
  width: 100%;
}

<main>
  <div class="title">
    <t1>MineGlobe | IchorDragon's Store</t1>
  </div>
</main>

<nav>

  <div id="navigator">
    <p class="navigator">Navigator</p>

    <div>
      <button class="store"><a href="store.html" style="text-decoration: none;">Back</a></button>
      <button class="prices"><a href="prices.html" style="text-decoration: none;">Prices</a></button>
    </div>
  </div>

  <div id="category">
    <p class="navigator">Select Category</p>

    <div>
      <button class="category Woods" onclick="document.getElementById('Woods').scrollIntoView();"><a style="text-decoration: none;">Woods</a></button>
      <button class="category Stones" onclick="document.getElementById('Stones').scrollIntoView();"><a style="text-decoration: none;">Stones</a></button>
      <button class="category ArmorsWeapon" onclick="document.getElementById('ArmorsWeapon').scrollIntoView();"><a style="text-decoration: none;">Armors & Weapons</a></button>
      <button class="category Brewing" onclick="document.getElementById('Brewing').scrollIntoView();"><a style="text-decoration: none;">Brewing</a></button>
      <button class="category Enchanting" onclick="document.getElementById('Enchanting').scrollIntoView();"><a style="text-decoration: none;">Enchanting</a></button>
      <button class="category Color" onclick="document.getElementById('Color').scrollIntoView();"><a style="text-decoration: none;">Color</a></button>
      <button class="category Redstone" onclick="document.getElementById('Redstone').scrollIntoView();"><a style="text-decoration: none;">Redstone</a></button>
      <button class="category Nether" onclick="document.getElementById('Nether').scrollIntoView();"><a style="text-decoration: none;">Nether</a></button>
    </div>
  </div>

</nav>

Is there a way to make the text works normally?

2 Answers2