What is the best way to incorporate navigation options alongside a centered logo?

Looking to create a unique top header layout with the logo positioned in the center and navigation options on both sides. Below is the initial code, but unsure how to proceed further. Any suggestions on achieving this design?

<div class="header">
    <div class="nav">
        <ul>
            <li>Option 1</li>
            <li>Option 2</li>
            <li>Option 3</li>
            <li>Option 4</li>
            <img class="logo_home" src="logo.png" height="100">
            <li>Option 5</li>
            <li>Option 6</li>
            <li>Option 7</li>
            <li>Option 8</li>
        </ul>
    </div>
</div>

CSS:

ul {
list-style:none;
}
li {
display:inline;
}
.header {
background-color: #999;
width: 100%;
height: 80px;
top: 0;
left: 0;
position:absolute;
}
.logo_home {
display:block;
margin-left:auto;
margin-right:auto;
}

Answer №1

Check out this demo showcasing what I believe you're aiming for. Modify the li inline to float, and make adjustments to the ul so it can be centered.

Another helpful example that aligns with your goal. Simply delete the display:block from the image and add text-align:center to the ul. With these changes, all elements will be centralized.

Here is the provided HTML:

<div class="header">
    <div class="nav">
        <ul>
            <li href="#">Option 1</li>
            <li href="#">Option 2</li>
            <li href="#">Option 3</li>
            <li href="#">Option 4</li>
            <li><img class="logo_home" src="logo.png" height="100" /></li>
            <li href="#">Option 5</li>
            <li href="#">Option 6</li>
            <li href="#">Option 7</li>
            <li href="#">Option 8</li>
        </ul>
    </div>
</div>

And here is the accompanying CSS:

ul {
list-style:none;
    text-align:center;/*this ensures alignment of items*/
}
li {
    margin: 0 5px;
    display:inline;
}
.header {
background-color: #999;
width: 100%;
height: 80px;
}
 .logo_home {
margin-left:auto;
margin-right:auto;
/*removed display:block*/
}

Answer №2

After making the change from using display: inline on li to float: left, I also placed the img inside the li element. This adjustment seems to align with your requirements, see it in action here: FIDDLE

Answer №3

To take it a step further, my approach would involve categorizing elements into separate left and right classes, while also incorporating links within the design.

 .logo_home img{
margin:0 auto;
}
.navleft {
    float: left;
    width: 500px;
    height: 90px;
    margin: 0 auto;
    padding: 0;
    }
.navleft li {
    float: left;
    padding: 5px 5px 5px 5px;
}
.navright {
    float: right;
    width: 500px;
    height: 90px;
    margin: 0 auto;
    padding: 0;
    }
    .navright li {
    float: left;
    padding: 5px 5px 5px 5px;
}
</style>
</head>
<body>
<div class="header">
        <ul>
            <div class="navleft">
            <li><a href="#">Option 1</li>
            <li><a href="#">Option 2</li>
            <li><a href="#">Option 3</li>
            <li><a href="#">Option 4</li>
    </div>      
    <img class="logo_home" src="logo.png" height="100">
    <div class="navright">
            <li><a href="#">Option 5</li>
            <li><a href="#">Option 6</li>
            <li><a href="#">Option 7</li>
            <li><a href="#">Option 8</li>
        </ul>
    </div>
</div>

Answer №4

Here is a simple way to achieve it-

.left-li {
    float:left;
}
img {
    float:left;
}
.right-li {
    float:left;
}

Below is the corresponding HTML structure

<div class="header">
<div class="nav">
    <ul class="left-li">
        <li href="#">Option 1</li>
        <li href="#">Option 2</li>
        <li href="#">Option 3</li>
        <li href="#">Option 4</li>
    </ul>
<img class="logo_home" src="logo.png" height="100">
    <ul class="right-li">
        <li href="#">Option 5</li>
        <li href="#">Option 6</li>
        <li href="#">Option 7</li>
        <li href="#">Option 8</li>
    </ul>
</div>

Answer №5

I believe this solution fits your needs:

http://jsfiddle.net/ABcDe/

Simply change all elements to have a display: inline property and place the image within an <li> tag.

UPDATE: Check out this improved version where the links flank the logo and align horizontally. http://jsfiddle.net/ABcDe/1/

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

Elements vanish when SHAKE effect is in use

I've been experimenting with this framework and I'm struggling to get the shaking effect to work properly. Whenever I hover over an element, other divs seem to disappear. I tried using different versions of JQuery and JQuery UI on JSFiddle, and i ...

Using ReactJS to toggle a div upon clicking

I am facing an issue with toggling a div by clicking on text within a toggle bar. I am in the process of recreating a WordPress website template in React JS that was originally built using bootstrap. You can view the original template here. So far, I have ...

Password Reset Function Malfunctioning

Could somebody please assist me in resolving the issue with the reset email? When attempting to reset it, I received the following message: An email with further instructions has been sent. However, I did not receive a reset link. Here is the reset file. ...

When working in Flask, I am experiencing an issue where my CSS is not linking to my

I am new to coding with HTML, CSS, and Flask and I have encountered an issue where my CSS styling only partially affects my HTML file. Here is the HTML code snippet: <!DOCTYPE html> <html> <head> <meta charset="UTF-8& ...

I'm looking to extract information from a webpage using Python by inputting specific criteria

Looking to gather information from a specific website - Link and save it either in a database or another location. The process involves providing input parameters such as entering the vehicle number, submitting it, then verifying if it matches your car. N ...

Troubleshooting: Jquery UI Draggable - Cursor losing track of draggable element

I want to create a draggable popup with Jquery UI functionality, but I'm facing an issue where the cursor does not stay aligned with the popup element when dragged. When dragging the popup element to the left, the mouse cursor goes beyond the div elem ...

The primary objective of utilizing margin

Just embarked on my journey to mastering HTML and CSS. Regarding the 'margin' property: Does its primary function revolve around centering elements horizontally on a webpage? I've crafted a navigation menu for a website, yet I struggle to ...

Error: The variable "deleted1" is not declared and cannot be used on the HTML button element's onclick

Hello, I need assistance from someone. I encountered an error message after trying to delete a row even though I have declared the button already. Error: deleted1 is not defined at HTMLButtonElement.onclick Could it be due to the script type being modul ...

When clicked, the DIV expands to fit the size of the window

Is there a way to use jQuery to expand a div to full screen when clicked, and change the content or layout of the div? I have a small div on my webpage with text or images inside, and I want it to enlarge when clicked so it fills the entire window with m ...

What is the best location to insert CSS in an HTML document?

I tried to customize the CSS on my Blogger blog, but unfortunately, I am unable to access the theme designer. As a result, I attempted to add CSS directly into the code using tags. However, I am having trouble locating the tag within the HTML file. This is ...

Removing an active image from a bootstrap carousel: A step-by-step guide

Within my bootstrap carousel, I have added two buttons - one for uploading an image and the other for deleting the currently displayed image. However, I am unsure how to delete the active element. Can someone provide assistance with the code for this but ...

What is the best method to make a hyperlink within an IFrame open in a new window?

Let me share the code I've been working on: <!DOCTYPE html> <html> <head> <base target="_blank"> </head> <body> <div style="border: 2px solid #D5CC5A; overflow: hidden; margin: 15px auto; max-width: 800px; ...

Incorporate a widget with dynamic height adjustment

We are currently working on creating a widget that can be easily embedded by third-party websites. Our goal is to have the widget automatically adjust its height through the embed script. Initially, we considered using an IFrame generated by our JavaScrip ...

What is the best way to toggle the visibility of a background image within a carousel?

As a beginner in j-query, I am struggling with creating a slider image carousel using a full background image. Most of the solutions I found online require a fixed width for all pictures to slide smoothly. However, I believe there might be a way to use an ...

Discovering the method to access a file without the standard .html or .php extension on the local host at 127.0.0

Is there a way to access my file without the .html or .php extension? My folder structure looks like this: C:\Apache24\htdocs\search-html\test search-html test low.html high.html ...

JavaScript tool for implementing sorting features on an HTML table

I am facing an issue with my AJAX-loaded table where I need sorting functionality implemented. Despite searching for various JavaScript plugins, none seem to work efficiently due to slow performance or errors. The structure of my HTML table is unique with ...

How can I make the burger icon responsive and centered in my navbar?

Struggling to center the burger icon in the navbar has been a bit of a challenge for me. Although it appears centered on small mobile devices, the icon shifts to the upper side on larger screens like tablets, losing its centered position. I am seeking advi ...

Guide on incorporating markdown in an ejs template

As I am planning to create a small blog using Express, EJS, and Markdown, I encountered an issue when trying to load Markdown on the page. Here is what I saw: https://i.sstatic.net/M2FEK.png Here's my code snippet: <!DOCTYPE html> <html la ...

PNG file unable to display in Google Chrome

I created an image using paint.net and saved it as a .png file. However, when I try to display the image on my website, only the borders show up without any image content. Here is the code I used: HTML <a href="home.php"><img id="logo" src="../i ...

What is the best way to add 1 to a number every second with javascript?

My code seems to be functioning correctly, but I'm having trouble setting the delay and stopping the increment after a certain interval. Can someone please assist me with this? Javascript: $(document).ready(function() { var number = parseInt($(& ...