What is the best way to increase the width of my header?

I created a header for my website using three li's, but I need the menu to be wider for a better look. Here is my current code:

header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 10;
    animation-name: dropHeader;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    animation-duration: 0.75s
}

header ul {
    display: inline-block;
    background: #fff;
    text-align: center;
    padding: 10px;
    margin: 0;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px
}
<header>
    <div id="mobile-menu-close">
        <span>Close</span> <i class="fa fa-times" aria-hidden="true"></i>
    </div>
   <!-- Not sure if to menu or not -->

   <ul id="menu" class="shadow">
        <li>
            <a href="#about">About</a>
        </li>
        <li>
            <a href="#projects">Projects</a>
        </li>
        <li>
            <a href="#contact">Contact</a>
        </li>
    </ul> 
</header>

I am struggling to make the menu reach the edges of the webpage without causing issues on different screen resolutions.

htmlcss

Answer №1

To achieve this, you can utilize the power of flex css.

header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 10;
    animation-name: dropHeader;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    animation-duration: 0.75s
}

header ul {
    display: flex;
    background: #fff;
    text-align: center;
    padding: 10px;
    margin: 0;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    justify-content: space-around;
    list-style: none;
}
<header>
    <div id="mobile-menu-close">
        <span>Close</span> <i class="fa fa-times" aria-hidden="true"></i>
    </div>
   <!-- Not sure if to menu or not -->

   <ul id="menu" class="shadow">
        <li>
            <a href="#about">About</a>
        </li>
        <li>
            <a href="#projects">Projects</a>
        </li>
        <li>
            <a href="#contact">Contact</a>
        </li>
    </ul> 
</header>

You can even opt for justify-content: space-between; to perfectly align with the full screen width. Hopefully, this will assist you in your design.

Answer №2

Take a look at this...
It is designed to be compatible with both large and small screens.

Below is the modified CSS code...

/*start css*/
header {
    background-color: #fff;
    display: block;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 10;
    animation-name: dropHeader;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    animation-duration: 0.75s;
}

header ul {
    display: block;
    background-color: #fff;
    text-align: center;
    padding: 20px 0 0 0;
    margin: 0;
}

header li {
    list-style: none;
    transition: .5s;
}

header li a {
    text-transform: uppercase;
    display: block;
    text-decoration: none;
    border: 2px solid #fff;
    padding: 30px;
    margin: 0;
}
header li:hover {
    background-color: rgba(0, 0, 0, 0.1);
}
/*end css*/

Your html code remains unchanged...

<!--start html-->
<header>
<div id="mobile-menu-close">
    <span>Close</span> <i class="fa fa-times" aria-hidden="true"></i>
</div>
<!-- Not sure if to menu or not -->

<ul id="menu" class="shadow">
     <li>
        <a href="#about">About</a>
    </li>
    <li>
        <a href="#projects">Projects</a>
    </li>
    <li>
        <a href="#contact">Contact</a>
    </li>
</ul> 
</header>
<!--end html-->

You may proceed with any further adjustments that are needed.
I trust that this response meets your needs.

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

Utilizing div tags for creating backgrounds in HTML

I am currently in the process of developing a website and would like to incorporate particles.js as my background while overlaying the content. However, I'm facing an issue where the content is displaying on top of the page instead of behind it when I ...

javascripthtmlcssdjangoparticles.js

Issue with Bootstrap margins and padding

While creating an application form from scratch with Bootstrap, I encountered a peculiar issue. The element with ID officeaddress is missing from the HTML page upon loading. I've experimented with the my class in Bootstrap and attempted to add line br ...

htmlwebfrontendbootstrap-5

Tips for focalizing multiple highlighted lines within a contenteditable div using jQuery

When attempting to apply the code below to change the margin-bottom of multiple selected lines, only the last selected line is affected. The other lines are simply wrapped in a p tag without applying the style change. It seems that I am unable to focus on ...

jqueryhtmlcontenteditableexeccommand

ng-repeat still displaying old data despite database array being updated

I have been trying to update my ng-repeat after adding a new item to my Mongo DB. According to my research, this should happen automatically. I understand that a new $scope is created for each view, and to share data between all $scopes, you would use a se ...

javascripthtmlangularjsmongodb

The functionality of WebDriver Wait is not functioning as expected

Is there a way to avoid waiting for the entire page to load? I thought using WebDriverWait would help, but I keep getting a TimeoutException even though the tag is visible. self.driver.get('http://www.quoka.de/') self.wait.until(EC.invisibility_ ...

pythonhtmlseleniumselenium-webdriverwebdriver

How can I set up an automatic refresh for an angularjs iframe?

This code utilizes Angularjs and is designed to be run on a localhost server. The first part of the code can be found in index.html: <iframe src="{{Url}}" width="100%" height="500"></iframe> The second part of the code is located in app.js: ...

htmlangularjsiframe

"Troubleshooting: Spring Boot application fails to load

I recently added some bootstrap templates to my resources/templates folder. However, when I start the server and navigate to the URL where I linked the index.html page, the bootstrap styling is not loading. Surprisingly, when I use the Chrome button in Int ...

htmlcssspring

Adjust the flex box height to match the dimensions of the image container

Currently, I am in the process of constructing a chat message layout and I am facing a challenge where I need to incorporate an image within a text bubble. The width of the bubble is fixed, but the height should adjust based on the aspect ratio of the imag ...

htmlcssvue.jsflexbox

Tips for converting all elements (divs) on a website from pixels to percentages

Recently, I received this website project from a friend for development. I haven't worked with CSS for a while, and I'm facing a few challenges. My main goal is to ensure that the website adjusts seamlessly to different browser sizes. The issue ...

htmlcsspixel

HTML has the ability to automatically reverse alignment for Right-to-Left languages

Our HTML application is quite complex and includes support for right-to-left (RTL) languages. However, when we switch the HTML to RTL using the <html dir='rtl'> attribute, not all elements are reversed as expected. Certain elements that wer ...

htmlcssright-to-left

Adding a class name to the three active, visible, and shown slides in SwiperJS is a simple process that can be done by

Currently, I am working on customizing a carousel in Swiper with slidesPerView={3}. My goal is to style the sliders that are not visible on the screen. I have made multiple attempts to achieve this: First, I tried adding the attribute slideActiveClass="sw ...

cssnext.jsslidercarouselswiper.js

flot.js - vertically position ticks, with a centered cut-off effect

I am facing an issue with using flot.js for charts that have a timestamp on the x-axis. Due to having numerous ticks on these charts, I decided to rotate them vertically to prevent overlap. While this solution works well, the labels are centered on the tic ...

cssflot

Guide to making a Material Design Radial effect animation

I am looking to create a unique toolbar effect by following the material design radial reaction choreography guideline. https://i.stack.imgur.com/6oB8r.gif I want to achieve this using an angular 2 transition, but I need some guidance on how to implement ...

cssanimationangulartypescript

Techniques on how to activate checkbox modification through card clicks

Is it possible to toggle the checkbox value by clicking on a card? <input id="{{a.switchID}}" name="value1" style="display:none;" type="checkbox" ng-click="send(a.deviceID,a.pinNumber,a.switchID,value1)" ng-model="value1" ng-true-value="1" ng-false-v ...

htmlangularjs

Is it possible to modify CSS animations using a variable passed from typescript?

Looking for a way to streamline my animations in the .ts file so that I can use a single block of code to change the hardcoded RGB values with a variable called this.fillColor. Each animation is currently set up separately for different elements, but the ...

csstypescriptanimation

Changing the class of an element using CSS when hovering over another

Is it possible to dynamically change the style of another element when hovering over a specific element? For example, I want a menu item to change its appearance when hovering over a submenu item. Here is the CSS code I have: ul.menu .menulink { padding ...

jquerycss

Adjusting the full width TD media query for HTML emails on iPhone is not functioning properly

I'm encountering an issue with implementing a media query for an HTML email to display correctly on iPhones. Here is a screenshot showing the problem: Upon testing on Android, the footer aligns properly, but on iPhone it doesn't stack as intende ...

htmlcssemailhtml-emailacid

Navigating tag blocks in VIM can be done easily by using the open

Is there a way to wrap a block inside tags in Vim, similar to how it's done in Sublime as shown in the image? ...

htmlvim

The display of data in Datatables is malfunctioning

I have already included the provided CDN on the website but I am still unable to display any results even after copying and pasting every line of code. Here is the CDN <link rel="stylesheet" type="text/css" href="https://cdn.d ...

javascripthtmljquerycssdatatables

Is using tables still considered a recommended practice for organizing a layout such as the one shown in the [IMG]?

Looking for recommendations on arranging images in the footer, in line with the design mockup using HTML/CSS. Wondering if tables are still a viable option for this purpose? ...

htmlcsshtml-table