Is it possible to restore the text to its original state?

Currently, I'm working on creating a simple website for server users to order items. However, I've encountered an issue related to the Navigator text.

Here is how it currently appears:

Upon inspecting the code below, you'll notice that there should be navigator text above the Back button and the Categories buttons below should display similarly to the back and prices buttons above since they share the same code.

I attempted several other approaches, but they were beyond my coding abilities so I turned to Google for assistance, yet didn't find any viable solutions.

Is there a way to resolve this issue?

Summary: Issue

  1. The "Navigator" text disappears at 100% zoom view
  2. Category buttons do not render as intended (same codes as buttons above with different IDs)

.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;
}

...

<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>

  ...

htmlcss

Answer №1

It's difficult to articulate all the changes implemented, as there were numerous adjustments made. My goal was to enhance your code and provide a functional layout (hopefully meeting your expectations).

In 2021, there are superior layouts available as compared to fixed menus (such as using grids), which perform better in responsive design and offer a cleaner look. However, exploring these options would require a thorough analysis on your part.

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/> 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>

Answer №2

  1. "Navigator" text disappears: The reason for this is the use of justify-content: center; on the nav

  2. Even with display: block, buttons will not automatically take up a width of 100%. Refer to (more information). It needs to be specifically added as a styling rule. Also, note that since all categories share the same style, a single class should suffice.

.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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to retrieve the position of hyperlinks within a div element

<div class="nav"> <a href="#item1">item1</a> <a href="#item2">item2</a> <a href="#item3">item3</a> </div> Looking at the HTML structure provided above, I am seeking to determine the index of the hyp ...

jqueryhtmlindexing

Creating interactive forms (the optimal method)

My project involves creating an Android Tablet application that will connect to a web service to retrieve dynamic forms which can be filled offline and then submitted when online. These forms are not predefined, and may contain attached images. However, I ...

androidxmljsonweb-serviceshtml

What could be causing the side margins on my navbar in mobile view in Bootstrap?

After spending some time working on a simple navbar with CSS styling, I encountered an issue when viewing it in mobile mode. The navbar did not expand to 100% of the screen width and had a margin of about 20px on both sides. CSS .navbar .brand { wi ...

htmlcsstwitter-bootstrapmarginnavbar

Ways to keep the footer at the bottom of the page without relying on the fixed positioning method

I’ve been tackling a responsive design issue on my website but I can't quite get the footer to stick at the bottom of the page. The 'fixed' property hides half of my text on mobile devices, so I turned to this solution (https://getbootstra ...

htmlcssbootstrap-4bootstrap-5

Tips for increasing the number of inputs within a form using <script> elements

I am currently working on a form within the script tags and I would like to include additional input fields before submitting. However, the submit button seems to be malfunctioning and I suspect that there may be an issue with how I am accessing it in my c ...

javascriptjqueryhtmlforms

issue with fetching response from ajax post call in slim framework 3

Update: The issue has been resolved. The correct localhost address for the ajax request should have been 127.0.0.1 instead of 121.0.0.1 On my client side, I am using the following code to send a POST request to localhost/login. <html> <title> ...

javascriptphphtmlajaxslim

What is the best way to showcase MySQL outputs in a Flask application?

Good evening everyone, I'm Eric, currently learning how to create web applications using Flask and Python. I've made some progress connecting to the database and performing searches without any problems. However, I am encountering two issues that ...

pythonhtmlflask

Using jquery ajax to add new rows to a MySQL table at the bottom, creating a repeating pattern

Using AJAX jQuery, I am constantly updating a table with data from a MySQL database at regular intervals. The refresh rate is set to 1 second. Below is the PHP file responsible for successfully creating the JSON data: <?php $servername = "localhost"; ...

htmljquerymysqljsonajax

Is it possible to use jQuery to identify when an item is located on a new line within a textarea?

I am looking to create an array from the content within a textarea. The textarea holds a varying list of names, each consisting of only one word without any spaces. Currently, I have the following code in place. However, my issue lies in the fact that the ...

jqueryhtmlarrays

Can a CSS class be added to a form_row in Symfony 4 Twig?

Need help with adding a CSS class to the entire form_row in a Symfony 4 twig template! Currently, my code only adds the class to the input tag, but I require it to be added to the parent div container. Here is the current code snippet: {{ form_ ...

htmlcsssymfony4

Ways to retrieve the text linked to a checkbox

Is there a way to access the text associated with a checkbox using its attribute? For example, in the code below, I want to alert the user with "Selected -- TextXYZ" when the checkbox is clicked. <form id="idForm" class="classForm"> <input type ...

javascriptjqueryhtmldom

Uncovering secret divs with the power of jQuery timing upon reload

Currently, I am in the process of developing a custom Wordpress theme for my blog which includes an overlay-container. When a button is clicked, this container slides in from the top and pushes down the entire page. To achieve this functionality, I am uti ...

javascriptjquerycsswordpress

fa icons moving the elements aside

I'm attempting to design a navigation menu with tabs, but I'm facing an issue where the tabs containing "fa icons" are consuming too much space, causing other elements to be shifted to the right or below (if there were more lines). How can I pre ...

javascripthtmlcssfont-awesomebootstrap-4

What methods can I use to stop Meta and Title tags from injecting when I import PHP files into an HTML document?

In my PHP document, I took out the Title and Meta tags from the header section, leaving it empty: <!doctype html> <html> <head> </head> <body> <?php require '/DBConnect.php'; //More code here that generates my ou ...

phphtmlinclude

Retrieve the file name of the webpage from the URL bar

Is there a way to retrieve the page name from the address bar using jquery or javascript instead of PHP? I am working on an HTML website and would prefer not to use PHP for this specific task. For example, if the address is www.mywebsite.com/hello.htm, ho ...

javascriptjqueryhtml

When a Mui Button is clicked, it changes the color of all tabs instead of just the active

My website footer contains 5 links represented by Mui Buttons with the component set to {Link} in order to transform them into clickable links. Currently, all the buttons are black and change to green when hovered over. However, I want the button color to ...

cssreactjsmaterial-ui

Tips for ensuring a flexbox stays within the bounds of its container and doesn't exceed the available space

I am in the process of developing a modal that needs to be centered on my page and expand organically, but only up to a specific width and height limit. Using flexbox, I have successfully centered this modal (.modal) on the page. Within the modal, there ...

htmlcssflexbox

What is the best way to decrease the width of one of the four columns?

I trust all is well with you. I'm having trouble adjusting the width of one of my table data cells. In the image attached below, you'll notice that my + icon is the same size as the other columns. I'd like to make it much narrower and posit ...

htmlcss

Fix for fixed scrolling in the navigation bar

Having a website that receives traffic from different countries, including Portugal and other non-English speaking places, I decided to add a translation option. However, I encountered an issue with Google's translate feature which displays a banner a ...

javascriptjqueryhtmlcss