What is the best way to ensure that the navigation bar remains in its original position when the size of the browser window is changed?

I'm a beginner in web development and Stack Overflow. This is my first time creating a website and I'm experiencing an issue with the navigation bar. It keeps shifting its position when resizing the browser window. Below is the source code I have been using. My goal is to have the navbar stay fixed on the right side, regardless of the browser size.

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14;
    margin:0px;
    padding:0px;
    line-height:1.5em;
    color:black;
}
#header {
    height:150px;
    width:100%;
    background-color:#ff0000;
}
.container {
    width:90%;
    margin:auto;
    margin-top:15px;
    margin-bottom:15px;
}
/* Other CSS styles */
<!DOCTYPE HTML>

<html>
<head>
<title>My Web Page</title>
<link rel="shortcut icon" href="favicon.ico" type="image/ico"/>
<meta charset="utf-8"/>
<meta name="description" content="This website is developed by Soumik Banerjee"/>
<meta name="keywords" content="Home, About, news, Contact"/>
<link rel="stylesheet" href="webpage.css"/>
</head>
<body>
<!-- HTML content -->

(I prefer not to make the navbar fixed). Any assistance would be appreciated.

Answer №1

Personally, I find w3-css to be an excellent tool for building responsive websites. For more information, you can take a look at this link.

I've found that using w3-css makes the process pretty cool and easy. Check out my official site which was created with w3-css.

If you're just starting out in web development, I highly recommend giving w3-css a try.

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

Switching the menu in mobile view: utilizing vue and pug

Hello, I am having trouble toggling my hamburger menu. When I check the console, it shows an error message: "nav is not defined". header.pug header.site-header div.navbar div.navbar__link.navbar--brand logo div.navbar ...

Tips for styling a PHP file using CSS and styling more than one element:1. Begin by creating a

I am currently attempting to style a php file using a linked stylesheet, but I am encountering some difficulties. At the moment, I have the , it will affect either the font or the border.</p> Is there a way to apply multiple styles to elements on a ...

"Troubleshooting a malfunctioning PHP contact form that is not functioning properly

Here's some of my JavaScript code: var form = $('#main-contact-form'); form.submit(function(event){ event.preventDefault(); var form_status = $('<div class="form_status"></div>'); $.ajax({ url: $(th ...

Rejuvenate your Bootstrap Accordion with these Settings

Using bootstrap documentation, I have implemented an accordion in my web application with the following code: <div class="accordion" id="accordion2"> <div class="accordion-group"> <div class="accordion-heading"> <a class=" ...

Finding the Perfect Placement for an Element in Relation to its Companion

Is there a way to achieve an effect similar to Position Relative in CSS using jQuery? I have developed a tooltip that I want to attach to various objects like textboxes, checkboxes, and other text elements. My code looks something like this: <input i ...

The way jQuery and CSS are rendered in the same browser window can vary depending on whether they are loaded via Django or statically

Experiencing a perplexing dilemma. While viewing a web page created using html, jquery, and css on the same browser but in two separate tabs, I am encountering varying renderings of the page. Scenario 1: Directly loading the html file from the file system ...

What is the best way to automatically direct users to their profile page after logging in?

After logging in, I need to redirect users to their profile page. The issue I'm encountering is figuring out how to pass the user_id into the URL for successful redirection. I've researched various solutions for this common problem without succe ...

conceal the bootstrap navigation bar while the page is being

Struggling to toggle a Bootstrap navbar on scroll? Need some guidance from the pros out there. I admit, my Bootstrap and jQuery skills are pretty basic. The browser console doesn't throw any errors, and I've experimented with fadeIn, fadeOut, add ...

Number Stepper Reverse

Could the HTML5 number stepper be reversed so that pushing down increases the number and vice versa? In Response to any 'Why?' inquiries: Consider batting order in sports like cricket or baseball. As you move down the order, your batting positio ...

Creating a Full Page Background Image That Fits Perfectly Without Resizing or Cropping

Can someone help me achieve the same effect as the website linked below, where the background image fades instead of being a slideshow? The image should be 100% in width and height without any cropping. I have managed to set this up with the codes provided ...

Overlap in Bootstrap 4 Sections

I'm facing an issue with two sections on my website. They are properly separated until a certain size, https://i.sstatic.net/e52t2.png, but when the size is reduced, they start to overlap https://i.sstatic.net/aMtHr.png. Below is a snippet of my code: ...

Can jQuery UI modal dialog interfere with clicking events?

I am encountering an issue with a button that is supposed to display a popup when clicked. In my layout.jspx file, I have the following code: <div class="menuBtn"> <div class="search"> <span></span ...

Tips for creating boxes with clearly defined edges on shared sides using three.js

When I draw boxes with common sides, I don't see the common edges, but rather perceive them as a single object even though there are 25 boxes: https://i.sstatic.net/gE8FW.png function box(scene, x, y, z, size) { const points = []; ...

Elegant bespoke input box

I am looking to create a customized input text feature similar to StackOverflow's tag editor, but with some minor differences. The goal is for the input field to function like a regular text input until a word is enclosed in curly brackets. Once enclo ...

The synergy between HTML and JavaScript: A beginner's guide to frontend coding

I have primarily focused on server-side development of enterprise applications (Java EE, Spring framework). However, I am now exploring client-side technologies for better understanding (not necessarily to become an expert). I have studied HTML and CSS th ...

A guide on accessing every element within a "div" tag that begins with a specified text

In my HTML document, there is a div element present. I am looking to retrieve all elements within this specific div that have id attributes beginning with a certain string (e.g. "q17_"). Is it possible to accomplish this task using JavaScript? If necess ...

Real-time collaborative Whiteboard using WebSocket technology (socket.io)

I am currently working on developing a collaborative online whiteboard application using HTML5 canvas, Node.js, and Websockets (Socket.io). While my progress is going well, I am facing some challenges when it comes to drawing circles. I have been successfu ...

Ways to position a DIV on the right side of the screen using percentage margin to adjust its distance from the edge as the browser is resized

Allow me to provide a clearer explanation here: Imagine an element placed on a webpage with a margin of 10% from the left side. When the size of the page is adjusted, the margin on the left decreases accordingly - for example, 10% from 1400px - 140px, and ...

Using the radius to determine the center point of the circle

<span class="qs">Q{{i + 1}} <a href="#question-view"></a></span> <div class="tooltipp text-center bubble[ngStyle]="bubbleStyle(prof?.proficiencyBrightness, prof?.proficiencyRadius)"> </div> In the illustration below, ...

Unexpected token . encountered in Javascript: Uncaught Syntax Error. This error message is triggered when

As someone who is completely new to programming, I was given the task of creating a voting website for a class assignment. In order to store data locally, I managed to create variables and implement them using local storage: var eventName = document.getEl ...