What is the best way to position my header at the top of my navigation bar?

I am new to the world of HTML and CSS!

My goal is as follows:

https://i.stack.imgur.com/hmLNS.png

This is my progress so far:

https://i.stack.imgur.com/rav8P.png

I am also looking to have the header fill the entire browser window and remain fixed, with a sticky navigation bar below. However, I have encountered an issue where the navigation bar refuses to settle under the header. Here is the code snippet I have been working on after watching some tutorials:

/* Styles for the page */
* {
    margin: 0px;
    box-sizing: border-box;
}

/* Font styling */
* {
    font-family: 'Candara', sans-serif;
    letter-spacing: 1px;
}

body {
    height: 100%;
    background-image: linear-gradient(to bottom right, #98c9cd 3%, #e6c3c1 60%, #e4989e 100%);
    margin: 0;
}

.topheader {
    width: 100%;
    height: 35px;
    font-size: 15px;
    text-transform: uppercase;
    text-align: center;
    padding: 20px;
}

.container{
    width: 80%;
    margin: 0 auto;
    clear: both;
}

header {
     background:rgba(255,255,255,0);
    position:fixed;
    left:0;
    top:0;
    transition:background 0.5s ease;
}

.logo {
    float: left;
    padding: 10px 0;
}

nav {
    float: right;
}

nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

You can find the full code below:

<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<title>IA2</title>
<header>
    <p id="topheader" style="background-color: #AEBC77;">For announcement posts</h1>
</header>
<body>

<div class="container">
    <img src="finallogo.png" alt="logo" class="logo" width="8%" height="16%">
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Shop</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact us</a></li>
        </ul>
    </nav>
</header>
</div>

</body>
</html>

Answer №1

You can easily achieve this layout using flexbox. Start by creating a flexbox container with the property flex-direction: column, which will contain the header and navigation bar. Inside the navigation bar, create another flexbox container with flex-direction: row to display the elements horizontally. If you need more help understanding flexbox, check out this resource - https://css-tricks.com/snippets/css/a-guide-to-flexbox/

To adjust your current code, consider changing the width of the header to width: 100vw so it spans the entire width of the screen.

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

Emphasizing sections using a specific class for paragraph highlighting

Is it possible to dynamically change the style of paragraphs based on certain classes? Let's say we have a text with a list of p elements and we want to modify the styles of paragraphs that come after specific classes, such as 'alert' or &ap ...

"Utilize jQuery to target and highlight specific HTML elements when redirecting

I am working with a list of elements and I want to be able to redirect the focus to a specific element using a URL. <div id="20"></div> <div id="21"></div> <div id="22"></div> // example url http://localhost: ...

Error Icon Displayed Incorrectly in Dynamically Generated List Items in Phonegap Android App

My attempt to dynamically create a list item with JSON response and set the data-icon to "check" is not working as expected. The result always shows "arrow-r" data-icon instead. This is how I generate the list item: function CallvarURL(url) { var res ...

Changing the color of buttons within the anchor and menu-separator classes in WordPress

Hi everyone, I'm new to WordPress and need help changing a green button to blue. I have found the button in an anchor tag with the class "menu-separator." Is there a way for me to write custom CSS to change its color? Here is what I currently have: ...

Designing a fluid dropdown menu with scroll functionality for my website

I have been trying to implement a scrollable dropdown menu on my website by following various tutorials, but none of them seem to be working. Despite my efforts, the dropdown menu remains non-scrollable. HTML <li> <a href="#">Team ...

Tips for modifying layout and concealment of content when using window.print()

Currently, on my web application, the vendor is able to print the invoice using windows.print(). However, in the print preview, it displays a screenshot of the current page. The vendor has specific printed paper with their own details and some blank space ...

The text element does not line up with the icons

As I'm working on creating my first account page header, I've run into an issue with some of the icons not aligning perfectly with the text. While advanced developers may find this task simple, as a beginner, I could really use some advice on how ...

Are you struggling with Grails - Ajax submission not functioning properly?

Trying to update a div when a form is submitted, but it seems like something is missing. Here's the HTML code: <%@ page contentType="text/html;charset=UTF-8" %> <html> <head> <meta name="layout" content="main" /> ...

Capture microphone and audio in a SIP call with sip.js

Greetings Stack Overflow community! I am in need of assistance with a project involving sip.js and VoIP for making real phone calls. The Objective I aim to enable users to record audio from both parties during a call and save the data on a server (either ...

Is it possible to have evenly spaced divisions within a fixed wrapper?

I have been experimenting with creating a dynamic navbar that remains at the top of a webpage. Here's what I have so far: <style> .sticky-nav-wrapper > div { color: #000000; display: inline-block; display: -moz-inline-box; * ...

When the flexbox is nested in a container with a flex-direction of column, the scrolling

I'm facing a challenge in setting up a basic message container that can scroll when necessary. The issue arises when I place the message box within another container and add a side bar, causing the message box to exceed the parent container's hei ...

Tips for preserving login status even after the browser is shut down with the help of JavaScript

I need help with maintaining a user session in my chat application even when the browser is closed. After users log in for the first time, I want their credentials to be remembered by the browser (I'm currently using local storage). How can I ensure ...

The functionality of dropdown menus in the Bootstrap 5 navbar is currently experiencing issues

I recently updated my Bootstrap from v5.2.2 to v5.2.3 and now the dropdown menus in my navbar are not working properly. They do not drop down as they should, instead, they remain stationary. Can someone please help me figure out what I am doing wrong? & ...

The displayed database results will appear in the opposite order of what was originally assigned for both inline and block elements

I have a database with information that I am trying to display using a while loop. My goal is to show the results in this format... Firstname Lastname - Firstname Lastname - Firstname Lastname player1 ---------------player1-----------------------pla ...

Truncate a string in Kendo Grid without any white spaces

While using a Kendo-Grid for filtering, I've come across an issue where my cell does not display the full string if there is no white space. The problem can be seen in the image below: For example, the string "https://www.linkedi/Testing" is only dis ...

Directing BeautifulSoup to a specific <tr> class

I'm currently working on a project where I need BeautifulSoup to extract the numbers located in the "Units Sold" column: from bs4 import BeautifulSoup from urllib import urlopen html = urlopen('http://www.the-numbers.com/home-market/dvd-sales/2 ...

Tips for incorporating border/outline/stroke into SVG elements using CSS

Currently, I am incorporating SVG elements into a webpage using D3js. However, I am facing challenges when it comes to styling these elements as typical CSS syntaxes like path { border: 3px solid green; } do not seem to work. Is there a way to apply bo ...

HTML integration of JavaScript not working as expected

My experience with separating files in HTML and JS has been positive - everything works smoothly when I link the JS file to the HTML. However, an issue arises when I decide to include the JS code directly within <script> tags in the HTML itself. The ...

Can you tell me the proper term for the element that allows CSS properties to be changed after a link has been clicked?

I have integrated a horizontal scrolling date selector on my website, and it is functioning well. However, I am facing an issue while trying to change the CSS properties of a clicked date link using jQuery. Despite successfully firing the click event, I am ...

Content that can be scrolled within a React.Box container

I am struggling with a particular view. The columnBox I have can potentially hold a large number of items, but for some reason it's not scrolling in the view. I've already tried setting overflowY to auto, but since I don't know the exact hei ...