What is the best way to customize the text in the navigation bar at the top of the page

I'm having trouble with the Navigation Bar code in my header. The text is not staying within the header and I can't seem to fix it. Is there a CSS solution to keep the text contained within the header?

<div class="header">
  <img src="img/logo.png" alt="logo" />
  <h1>Empowering The Nation </h1>
</div>
<ul class="navigation">
  <a href="Home.html"><b>Home</b></li></a>
  <a href="Courses.html"><b>Courses</li></b></a>
  <a href="Pricing.html"><b>Pricing</b></li></a>
  <a href="Contact.html"><b>Contact Us</b></li></a>
  <a href="Sign In.html"><button>Sign In</li></button></a>
</ul>
</div>
</div>

Answer №1

Ensuring your HTML is valid is crucial. For instance, eliminating unnecessary closing tags like </div>, ensuring there are opening <li> tags for every closing </li> tag, and so on. To incorporate a navigation bar in the header, simply place your code within the header div. I have made some adjustments and provided an example of what properly formatted HTML looks like.

<!DOCTYPE html>
<html lang="en">
  <header>
    <meta charset="UTF-8" />
    <title>Home</title>
    <link rel="stylesheet" type="text/css" href="Home.css" />
    <div class="header">
      <div class="page-title">
        <img src="img/logo.png" alt="logo" />
        <h1>Empowering The Nation</h1>
      </div>
      <div>
        <ul class="navigation">
          <li><a href="Home.html">Home</a></li>
          <li><a href="Courses.html">Courses</a></li>
          <li><a href="Pricing.html">Pricing</a></li>
          <li><a href="Contact.html">Contact Us</a></li>
          <!--Why this button ?-->
          <li><a href="Sign In.html"><button>Sign In</button></a></li>
        </ul>
      </div>
    </div>
  </header>

  <body>
    <div>This is the body of the page</div>
  </body>
</html>

<style>
  .header {
    display: flex;
    justify-content: space-between;
  }

  .page-title {
    display: flex;
    justify-content: flex-start;
    align-self: center;
  }

  img {
    align-self: center;
  }
</style>

Answer №2

Your HTML code seems to have some errors, but I have made corrections to address the issue. To solve your problem of having a horizontal list, you can utilize flexbox. By applying display: inline to both the unordered list (ul) and list items (li), you can achieve the desired outcome.

Example:

.nav {
  
  display: flex;
  justify-content: space-between;
  gap:20px;
  margin: 0 auto;
}

.navigation {
  display: flex;
  align-items: center;
  justify-content: center;  
}
.navigation ul, li{
  display: inline;
  padding: 0 10px;
  font-weight: bold;
}

.navigation a {
  color: black ;
}
<div class="nav">
  <div class="header">
    <img src="img/logo.png" alt="logo" />
    <h1>Empowering The Nation </h1>
  </div>
  <div class="navigation">
    <ul>
      <li><a href="Home.html">Home</a></li>
      <li><a href="Courses.html">Courses</a></li>
      <li><a href="Pricing.html">Pricing</a></li>
      <li><a href="Contact.html">Contact Us</a></li>
      <li><a href="Sign In.html">Sign In</a></li>
    </ul>
  </div>
</div>

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

Aligning content in a div with proportional elements, maintaining left alignment of the elements

Trying my hand at creating an HTML template to display TV shows as cover artwork. The layout is flexible, showing up to five shows per row on larger screens and a minimum of two on smaller screens like smartphones. It's been a while since I've wo ...

What steps should I take to ensure that elements beneath a div are made visible?

I've been working on a unique project to create a website with "hidden text" elements. One of the cool features I've developed is a circular div that follows my mouse cursor and flips all text below it using background-filter in both CSS and Jav ...

The jQuery hide() method conceals an element without affecting its parent

Can't seem to figure out JQuery... So, here's the issue: I've got a page where visitors can enter their email address by clicking on a link inside a div (id="contact"). <div id="contact"><a href="">Interested in leaving your con ...

Tips for aligning images directly alongside text without any separation

I'm currently learning html and facing some challenges with coding my own blog page. My main issue is trying to design a section that leads to the latest post, but I can't seem to get the layout right. I envision having the text and image neatl ...

Creating dependent dropdown lists is a useful way to streamline data entry and ensure accuracy in your

I am looking to create a series of 4 connected dropdown lists, structured like this: District: <select id="district"> <option>Select a District</option> <option value="district1">dstrict1</optio ...

Showing Stationary Pictures at Full Size in OpenLayers

I am trying to showcase static images as maps using a StaticImage layer in ol3, with the image size set at 100% in pixels. However, I am facing difficulty in ensuring that the displayed images are always the correct size based on the extent and zoom variab ...

Utilizing HTML, CSS, and JavaScript to dynamically add and remove a class from

I've been struggling with a specific issue in my 9-button grid. When I click on a button and it changes color to orange, if I click on another button, both buttons remain orange. What I want is for only one button at a time to be orange - when a new b ...

Styling a dynamically-injected div using an AJAX request (xhrGet)

Hello everyone, currently I am using the code below to fetch updated content after receiving a "push" event from a server. The new content is then used to replace the existing div/content. However, I'm facing an issue where none of my styles from the ...

What is the best way to determine the width of a CSS-styled div element?

Is there a way to retrieve the width of a div element that is specified by the developer? For example, using $('body').width() in jQuery will provide the width in pixels, even if it was not explicitly set. I specifically need to access the width ...

Determine the location of a character based on its index position

Is it feasible to identify the precise x and y coordinates of the character at position 24 (e.g., '-') in this overflowing multi-line text? ...

Resolution of JSP/HTML Pages

Looking for guidance on adjusting the height and width of JSP/HTML pages to accommodate various monitor resolutions. How can I ensure that my page looks good and fits properly on all types of monitors? Any tips on setting height and width in a JSP would ...

Methods for concealing the title and date when printing web content using JavaScript

When utilizing the window.print method to print out a specific screen, I encountered an issue. I need to hide the date in the top left corner of the image as well as the title (not the big heading) which has been intentionally blurred. I've come acro ...

What is the best way to navigate between different areas of an image using html and javascript?

I am currently in the process of learning how to develop mobile applications, and I am still in the early stages. Although this question is not directly related to mobile development, it pertains more to html/css/js. My goal is to create a simple game wh ...

Creating dynamic text bubble to accommodate wrapped text in React using Material-UI (MUI)

I am currently developing a chat application using ReactJS/MUI, and I have encountered an issue with the sizing of the text bubbles. The bubble itself is implemented as a Typography component: <Typography variant="body1" sx={bubbleStyle}> ...

Automatically conceal a div or flash message after a short period of time by utilizing CSS3 in a React

I am relatively new to the React environment and recently created a basic component for a bookmarking feature. Essentially, when the favourite icon is clicked, an ajax call is sent > a record is created in the database > on ajax success, a flash me ...

Is it secure to use a unique, static HTML/CSS website?

As a web developer, I am currently working on hosting a Wordpress-website for a client. However, my frontend development skills have improved significantly and now I feel inspired to create a simpler and more customizable version on my own. This website i ...

Issue with transition effect not functioning properly when hovering in HTML and CSS

Is there a way to achieve a slow smooth transition when hovering over the .bg-gradient element and have the same effect when removing the cursor? Currently, the transition happens quickly on hover. .asc { height: 500px; background-position: 50%; ...

Display PHP Array data in a table on a webpage

I need help arranging the results from a MYSQL database into an HTML table. Right now, each item is displayed in one column per row. Here is my current code: <?php $catagory=$_GET["q"]; $con = mysql_connect("localhost","cl49-XXX","XXX"); if (!$con) ...

Fetching data in VueJs before redirecting to a new page

Within the mounted function, I am creating an action that fetches data from a Rest API and populates my table in a Vue.js component mounted() { UserService.getProjects().then( (response) => { this.isProject = true; this.project ...

Align the content at the center within a Bulma column

I am working with multiple columns, each column containing a circle in the CSS depicted as a font awesome icon centered within it. However, I am facing an issue where the circle remains aligned to the left while the text itself gets centered. HTML <di ...