Difficulty Aligning Header Elements - Combining Navigation and Logo on the Same Line

Question

Difficulty Aligning Header Elements - Combining Navigation and Logo on the Same Line

I am currently facing an issue with positioning a logo and navigation links within a <header> element. When I apply the CSS property text-align:center;, the logo aligns to the center on one line while the navigation links appear on another line directly below it.

My desired outcome is to have both the logo and navigation links display on the same line, beside each other.

To address this temporarily, I have added a float:left; property to the .logo class in the JSFiddle provided below:

JSFiddle Link: https://jsfiddle.net/z4f21hx3/1/

I would greatly appreciate any assistance with resolving this issue.

Thank you,

MistUnleashed

html css responsive-design

Answer 1

Answer №1

This solution will work effectively for screen sizes up to 605px and below.

Here is the CSS code:

/* Custom CSS for Beauty Queen 7 theme */

/* Reset styles */
 * {
    margin:0;
    padding:0;
}
/* Main CSS */
 html {
    background-color:#FFF;
}
header {
    background-color:#FFF;
    width:100%;
}
nav {
    text-align:center;
    margin:0 auto;
    display:block;
    box-shadow:0 4px 2px -2px gray;
}
.logo {
    display:inline-block;
    //float:left;
    height:120px;
    vertical-align:bottom;
}
.logo img {
    height:120px;
    width: auto;
}

nav ul {
    list-style:none outside none;
    margin:0;
    padding:0;
    display:inline-block;
}
nav ul li {
    display:inline-block;
    list-style:none outside none;
    -moz-transition:all 300ms ease-in-out 0s;
    -ms-transition:all 300ms ease-in-out 0s;
    -o-transition:all 300ms ease-in-out 0s;
    -webkit-transition: all 300ms ease-in-out 0s;
    transition:all 300ms ease-in-out 0s;
}
nav ul li a {
    color:#555;
    display:block;
    line-height:5em;
    padding:3em 1em 0em 1em;
    text-align:left;
    font-family:Tahoma, Geneva, sans-serif;
    font-size:15px;
    text-decoration:none;
    -moz-transition:color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    -ms-transition:color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    -o-transition:color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    -webkit-transition:color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    transition:color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
}
nav ul li:hover {
    background-color: #F36;
    color: #FFFFFF;
}

DEMO: View on JSFiddle

Answer 2

This solution will work effectively for screen sizes up to 605px and below.

Here is the CSS code:

/* Custom CSS for Beauty Queen 7 theme */

/* Reset styles */
 * {
    margin:0;
    padding:0;
}
/* Main CSS */
 html {
    background-color:#FFF;
}
header {
    background-color:#FFF;
    width:100%;
}
nav {
    text-align:center;
    margin:0 auto;
    display:block;
    box-shadow:0 4px 2px -2px gray;
}
.logo {
    display:inline-block;
    //float:left;
    height:120px;
    vertical-align:bottom;
}
.logo img {
    height:120px;
    width: auto;
}

nav ul {
    list-style:none outside none;
    margin:0;
    padding:0;
    display:inline-block;
}
nav ul li {
    display:inline-block;
    list-style:none outside none;
    -moz-transition:all 300ms ease-in-out 0s;
    -ms-transition:all 300ms ease-in-out 0s;
    -o-transition:all 300ms ease-in-out 0s;
    -webkit-transition: all 300ms ease-in-out 0s;
    transition:all 300ms ease-in-out 0s;
}
nav ul li a {
    color:#555;
    display:block;
    line-height:5em;
    padding:3em 1em 0em 1em;
    text-align:left;
    font-family:Tahoma, Geneva, sans-serif;
    font-size:15px;
    text-decoration:none;
    -moz-transition:color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    -ms-transition:color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    -o-transition:color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    -webkit-transition:color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    transition:color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
}
nav ul li:hover {
    background-color: #F36;
    color: #FFFFFF;
}

DEMO: View on JSFiddle

Difficulty Aligning Header Elements - Combining Navigation and Logo on the Same Line

Answer №1

Similar questions

Opting for HTML tags directly rather than using div.class

Vertical alignment of image on the left column

What could be causing this hydration error in NextJS in the development server build but not in the production build?

What's the best way to create flying text effects - using CSS or JavaScript

Designing a menu header against a specific background color resulting in misalignment

Styling a div element in React

unable to display picture on puggy

How do I retrieve the value of a class that is repeated multiple times?

What is the best way to navigate to the top of a form panel?

Utilizing unique background images tailored to different screen resolutions

What is the best way to incorporate a solid element onto a see-through background?

What is the best way to customize my menu so that the currently selected element stands out with a distinct color?

What are the steps to create a basic chrome extension that functions as a countdown clock?

Tips for locating the initial <body .....> tag within a text using PHP?

The Chrome browser is not displaying the Ajax loader

Angular: Ensuring Paypal button does not display twice without a hard reload

Incorporating a unique font into your SAPUI5 application

Styling pagination using CSS and jQuery

Display Google Maps and YouTube videos once user consents to cookies

Baffling Visibility Issue: iframe's Transparency Lost in Chrome and IE, Only Visible in Firefox