Align the top navigation centered horizontally, with the logo on the left and language selection on the right

Is there a way to center my menu horizontally while keeping the logo aligned to the left and language selection to the right, all with consistent proportions when resizing? I've tried various suggestions but nothing seems to work for my navigation bar. Here is what I have attempted:

CSS:

.nav-bar img {
    float: left;
}
.nav-bar {
    height: 70px;
    width: 100%;
}
#container {
  width: 1200px;
  margin: 0 auto;
  height: 70px;
}
.nav-bar ul {
  padding: 0px;
  margin: 0px;
  text-align: center;
  display:inline-block;
  vertical-align:top;
}
#menu {
  float: left;
}

#languages {
  float: right;
}

HTML: 

  <div id="container">

    <img id="logo" src="image.svg">

    <ul id="menu">
      <li><a href="#">home</a></li>
      <li><a href="#">about</a></li>
      <li><a href="#">contact us</a></li>
    </ul>

    <ul id="lang-bar">
      <li><a href="#">En</a></li>
      <li><a href="#">Fr</a></li>
    </ul>
  </div>
</nav>
htmlcss

Answer №1

To center the content within the container, you can use the CSS property text-align:center. You'll also want to make the ul elements display as inline-blocks. To position the logo and language menu at the top left and top right respectively, you can use absolute positioning:

html,
body {
  margin: 0;
}

#container {
  width: 100%;
  text-align: center;
  position: relative;
  background: #ddd;
}

#container ul {
  list-style: none;
  display: inline-block;
}

#container ul li {
  display: inline-block;
  margin-right: 1em;
}

#logo {
  position: absolute;
  left: 0;
}

#lang-bar {
  position: absolute;
  right: 0;
}
<div id="container">

  <img id="logo" src="image.svg">

  <ul id="menu">
    <li><a href="#">home</a></li>
    <li><a href="#">about</a></li>
    <li><a href="#">contact us</a></li>
  </ul>

  <ul id="lang-bar">
    <li><a href="#">En</a></li>
    <li><a href="#">Fr</a></li>
  </ul>
</div>

Answer №2

To center the logo in a flex layout, you can set the parent element to use flex and add justify-content: space-between to create equal spacing between the three child elements. However, this won't fully center the logo. To achieve centered alignment, apply flex-grow: 1 with flex-basis: 0 (or flex: 1 0 0;) to each child element so they share the available space equally. You can then align the content within each flex item accordingly. Additionally, you can vertically center everything by using align-items: center on the main container.

#container {
  justify-content: space-between;
  align-items: center;
}

#container > * {
  flex: 1 0 0;
}

#lang-bar {
  flex-direction: column;
  align-items: flex-end;
}


#logo {
  max-width: 100px;
}

.flex {
  display: flex;
}
 
#menu {
  justify-content: center;
  list-style: none;
}

#menu li {
  margin: 0 .5em;
}
<div id="container" class="flex">
  <div class="logoContainer">
    <img id="logo" src="http://kenwheeler.github.io/slick/img/fonz1.png">
  </div>
  <ul id="menu" class="flex">
    <li><a href="#">home</a></li>
    <li><a href="#">about</a></li>
    <li><a href="#">contact us</a></li>
  </ul>
  <ul id="lang-bar" class="flex">
    <li><a href="#">En</a></li>
    <li><a href="#">Fr</a></li>
  </ul>
</div>

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

Is There a Glitch in IE9? Unexplained Expansion of DIV Element

Here is a small code sample that I have: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Test</title> <style type="text/css"> table.Sample { width: 600px; table-layout: fixed; } table.Sample ...

csshtml

Using JavaScript, what is the method for inputting values into a window.prompt()?

I've been working on a project that involves scraping basic HTML pages from an internal server at my workplace. When I visit these pages, a popup window similar to a windows.prompt() appears, asking for a username and password with the message "Enter ...

javascriptpythonhtml

Bottom section goes haywire in Chrome when clearfix is applied to a div above

When I remove the clearfix div above the footer, the text aligns correctly on Firefox. However, this causes issues with other elements on the page. It's puzzling how the clearfix is impacting the footer in this way... Here is a link to my page: ...

cssfooterclearfix

Attempting to eliminate an HTML element using JavaScript

Currently, I am working on creating an image rotator in JavaScript. The CSS fade animation I have applied only seems to work during element creation, so I am forced to remove the element on each loop iteration. The main issue I am encountering is related ...

javascripthtml

String object causing jQuery selector to malfunction

const newHTML = '<html><head><title>Hello</title><link rel="apple-icon-touch-precomposed" href="image.jpg" /></head><body></body></html>'; alert($(newHTML).find('link[rel="apple-icon-touc ...

javascriptjqueryhtmlstring

Making a form select element responsive within a bootstrap 4 card component

Check out the code snippet I have here: This is how I envisioned it to look, and it works perfectly at large resolutions. However, when I scale it down to tablet size, the resizing of the select element doesn't seem to work properly. Here's a s ...

htmltwitter-bootstrapbootstrap-4

The calculator I designed using HTML, CSS, and JavaScript is experiencing difficulty adjusting to various screen sizes

I recently built a calculator using HTML, CSS, and JavaScript. It works perfectly on PC or big screens, but when viewed on smaller devices like phones or tablets, the display gets cut off and does not adjust properly. Here are some example pictures for ref ...

javascriptandroidhtmlcssfullscreen

"Using Mxgraph's getPrettyXml function does not retrieve the value of a custom

I’m having trouble with mxgraph’s getPrettyXml() not capturing the value of Custom elements. In my customized template, it looks like this: <add as="symbol"> <Symbol label="Symbol" description="" href="" data="{[hi :bill]}"> &l ...

javascripthtmlmxgraph

Is there a way to extract all the <a> elements from the <ul> element, which acts as the parent node in my HTML code?

Is there a more efficient way to target and select all the <a> tags within a parent tag of <ul>? I attempted using $("ul").children().children(); but I'm looking for alternatives. <ul class="chat-inbox" id="chat-inbox"> <li&g ...

jqueryhtml

How can you determine if a DIV element is within view in HTML (without being overflowed)?

Is there a way to determine if a DIV is within its container and therefore visible? In this scenario, the active button (highlighted) can be seen because it is contained within the boundaries: However, in this case: The active button cannot be viewed as ...

htmlcss

Expanding the height of an image in a multi-select dropdown using CSS

I have an image that is included in all text fields and drop downs like so: However, when it comes to a multiple select drop down box, the image appears differently: I would like the image to display as shown above for multiple select drop downs. I atte ...

htmlcss

Creating Table Rows on-the-fly

Seeking assistance and guidance from the community, I have modified code from an online tutorial to allow users to dynamically add rows to a table when data is entered in the row above. However, I am facing an issue where I can only insert one additional ...

javascripthtml

Issues with jQueryUI sortable causing flickering and erratic movement while attempting to reorder and position items within the list

When using jQueryUI sortable with a long list of items, I encounter an issue where the items flicker and jump around the screen as I try to change their order by dragging them. This makes it nearly impossible to organize the items effectively. It seems li ...

jqueryhtmlcssjquery-ui

Preserving Scroll Location Through Back Button Usage and Ajax Manipulation of the Document Object Model

Currently, I am incorporating a feature where results are loaded in using ajax with an infinite scroll. However, there is an issue when a user clicks on an item in the list and navigates away from the page - upon returning by clicking the back button, they ...

javascriptjqueryhtmlajax

How can CSS positioning be utilized to align lines accurately?

Recently, I created a basic jsbin to draw a line connecting two points. It doesn't rely on any drawing libraries; just plain JavaScript and jQuery. I managed to calculate the angle using code I found in this library. When dragging the circle at the ...

javascriptjqueryhtmlcss

Leveraging both text content and element positioning with Selenium's getattribute() method

I am in the process of creating a test framework using Selenium for a website that includes an ADF generated Tree. The structure of the tree resembles the following: <table> <tr> <td> <div> <span> <a id="AN_ID" t ...

javahtmlxpathselenium

Trick to keep horizontal element alignment intact when scroll bar appears

Currently, all my pages are designed with the standard fixed-width-margin-left-right-auto layout. .container{ width:900px; margin:0 auto; } An issue arises when some of these pages exceed the height of the window, requiring a vertical scroll ba ...

javascripthtmlcsspositionscrollbar

Unable to invoke Kendo JavaScript

I'm facing an issue with my source code where I am trying to call kendo.all.min.js. Everything works fine when I call kendo.common.min.css and kendo.default.min.css, but as soon as I try to call kendo.all.min.js, I encounter the following error: http ...

javascriptjquerycsskendo-ui

Leveraging the power of Bootstrap 4 to place the footer beneath all remaining content on the

I am currently working on a React application that consists of a header, container, and footer. To add animation to the route loading process, I had to apply position: absolute to the container section of the page. Within the container, there is a row wit ...

csshtmlreactjsbootstrap-4

Struggling with setting margins effectively in Bootstrap for the desired layout

I am attempting to create two columns with space between them, but whenever I try to add a margin-right, one of the columns goes down. Can someone please assist me? <div class=row> <div class="boxi col-6"> Content here ...

htmlcssbootstrap-4