Designing a navigation system that revolves around a central logo image

I have created a navigation bar that you can see in this image: https://i.stack.imgur.com/eT4TL.jpg

Using foundation to construct a website, I have designed the nav bar in the following manner:

HTML:

<nav class="top-bar">
    <ul>

          <li><a href="about.html">About</a></li>
          <li id="menu-divider">|</li>
          <li><a href="testimonials.html">Testimonials</a></li>
          <li><a href="index.html"><img src="images/logo.png" alt=""></a></li>
          <li><a href="services.html">Services</a></li>
          <li id="menu-divider">|</li>
          <li><a href="contact.html">Contact</a></li>
    </ul>


</nav>

CSS:

.top-bar { font-family: 'bebas_neueregular'; 
           height: 150px;
           line-height: 100px;
           padding: 18px;
           width: 100%;
           position: relative;
           text-align:center;
           margin-bottom:10px; }

.top-bar ul { display:inline-block;
              margin-left: auto ;
              margin-right: auto ;}

.top-bar ul > li { display:inline-block;
                   margin-left: auto ;
                   margin-right: auto ;}

 #menu-divider { color:#ffffff;
                font-size: 24px;}

The current design has caused my logo (center li element) to not be perfectly centered since other li elements vary in width, resulting in collective center alignment. I am seeking assistance to have the logo at the dead center and other li elements adjusted around it.

Thank you for any guidance provided in advance!

csshtmlzurb-foundation

Answer №1

If you're looking to create a flexible navigation layout, give this code snippet a try: http://codepen.io/anon/pen/dYXQpz

The key is to use 3 containers and apply flex properties to them. Within the left and right containers, align the elements accordingly.

<div class="nav-bar">

  <div class="sideNav leftNav">
    <div class="menu">
      MENU 1
    </div>
    <div class="split"></div>
    <div class="menu">
      MENU 2
    </div>
  </div>
  <div class="logo">
    <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSN9qhGx6NftAepiMOjdGXkcW-UxkO9dtQ4VGRlepyzNC2S8xQCcA" />
  </div>
  <div class="sideNav rightNav">
    <div class="menu">
      MENU 3
    </div>
    <div class="split"></div>
    <div class="menu">
      MENU 4
    </div>
  </div>


</div>

After setting up the structure, add the CSS styles provided. Feel free to further customize it based on your needs!

.nav-bar {
  background: pink;
  display: flex;
}

.sideNav {
  flex: 1 0 auto;
  background: red;
  display: flex;
}

.leftNav {
  justify-content: flex-end;
}

.rightNav {
  justify-content: flex-start;
}

.sideNav > div {
  margin: 100px 20px 0 20px;
}
.split{width: 2px;background: white;height: 16px}

Give it a shot and tweak as necessary. Flexbox can work wonders for creating responsive layouts!

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

What methods are available to load sections of a complex SVG shape asynchronously?

I'm currently in the process of creating a website with a geographic map built using SVG, pulling data from OpenStreetMap. Due to its large size and potential for transformations such as zooming and moving, only a portion of it will be visible on the ...

javascripthtmlcsssvgcatiledlayer

Troubleshooting problems with the height of nested DIV elements

Issue I am attempting to replicate the layout depicted in the image below. The black area represents the body with id="library", the grey div is id="body" (which is not visible due to lack of margins for inner divs), the light blue div is id="sideBar", th ...

csshtml

How to align an unordered list vertically in the center using Bootstrap?

Trying to figure out why the ul within this parent div is not centered vertically. Here is a screenshot of the issue: https://i.sstatic.net/ZOc9M.png <div className=" d-flex align-items-center bg-primary "> <ul ...

javascriptcssreactjsfrontendbootstrap-5

The jQuery dynamic fields vanish mysteriously after being validated

I am facing an issue with my jQuery and validation. Below is the code snippet causing the problem: var fielddd = 1; $(document).on('click', '.btn.add-field', function() { fielddd++; $('#newfield').append('< ...

javascriptphpjqueryhtml

Is there a way to apply a custom CSS to Bootstrap without altering its appearance?

Check out this code snippet <link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet" href="css/sub-cat.css"> I am having trouble with my CSS. I tried to modify the "Caption" class in Bootstrap by adding some new styles in "sub- ...

htmlcsstwitter-bootstrap

React JS progress circle bar is a simple and effective way to visualize

Currently, I am in the process of developing a progress circle bar that will function as a timer alongside sliders. Each slide is intended to have its own corresponding progress bar. While I have managed to create the bars individually, I am facing challe ...

javascripthtmlcssreactjsslider

The Enigmatic Gap Amidst Flex Elements

I have a situation where two divs are placed within a flex container. However, the second div is incorrectly aligning to the right side of the page rather than next to the first div. Despite the default values for flex-flow being row and justify-content b ...

htmlcssflexbox

Is it a scope issue if ng-click is not firing and the function is not working properly?

I'm facing an issue with an animation that is not working as intended. The goal is to have the search button trigger an animation to pull a search bar from the right side, allowing users to input their search query. However, the ng-click function does ...

javascriptjqueryhtmlasp.netangularjs

Optimize your website by implementing automatic HTML DOM updates without the need to reload the entire page to read database information

Currently, I am working with Asp.Net MVC and SQL server. My goal is to update the HTML content dynamically with new data from the database without having to reload the entire page. What would be the most efficient approach to achieve this? @foreach (var ...

jqueryhtmlsqlasp.net-mvc

Is it possible to utilize :not in this scenario?

<ul class="promocode"> <li>one</li> <li>two</li> <li class="three">three</li> </ul> Is there a way to use :not in order to apply a hover effect to the entire list, except when hovering ov ...

css

Issue with page not updating after local storage change and returning to previous page

I have encountered an issue where in Firefox and Safari, the value retrieved from localstorage on the first page is not updated until I manually refresh the page after setting the localstorage value on the second page. Disabling the cache did not resolve t ...

javascripthtmllocal-storage

Constructing markup for text and subtext in a meaningful manner

I am in the process of creating a roster of Employees and their dependents on a webpage and I could use some guidance on the best way to structure this information. Here is an example of the content on my page: <div> John Smith Employee - 03/01/198 ...

htmlcss

The challenge of incorporating mod_rewrite with CSS files

I am new to mod_rewrite. I have a page profiles.php?page=XXX and I tried to change its URL to something more friendly like /cars/XXX/ RewriteEngine on RewriteRule ^cars/([^/]+)/?$ profiles.php?page=$1 [L] The issue arises when including styles: <li ...

phpcssmod-rewriteradix

Changing a transparent div with overlays into a visual representation of its underlying background

I am curious to know if it is feasible to carry out the operation mentioned, given that JavaScript doesn't currently have access to the contents of certain objects, such as a Flash video player. I have explored various screenshot plugins, but none of ...

javascriptjqueryhtml

The images on the Shopify platform are becoming increasingly fuzzy

I'm facing an issue where the images I add to my Shopify site using the Brooklyn theme appear blurry unless resized to a small scale. The dimensions of the images are 1748 x 1240 at 300dpi. My intention is to implement a JQuery image slider (lightsli ...

jqueryhtmlcssimageshopify

Reducing the Bootstrap Navbar Collapse Width

After spending all day searching for an answer, I still haven't found a solution to my problem. Here is the code I am struggling with: <div class="visible-xs navbar navbar-ti navbar-fixed-top "> <div class="container"> <div class ...

cssasp.nettwitter-bootstrap

I am looking to ensure that the ul li a() elements remain hidden until I hover over the h2 tag, at which point they will be displayed

Insert your code here : <table cellpadding="0" cellspacing="0" align="center" class="TblGreen"> <tr> <td> <h2><a href="#" class="AGreen">Sweater</a></h2> <p>The coding business</p> ...

htmlcss

The JS content failed to load into the HTML page

I need help creating a workout tracker using two JS files. The main.js file is responsible for loading content from the second file (workoutTracker.js) into the index.html. However, I'm facing an issue where the content is not being displayed on the p ...

javascripthtmlcssperformancetracker

The function driver.find_element is unable to locate an element using the "class_name" attribute

My attempt at using driver.find_element, with the "class_name" method to locate and click on a button for expanding rooms on this website resulted in an error message: raise exception_class(message, screen, stacktrace) selenium.common.exceptions.N ...

pythonhtmlselenium-webdriverweb-scraping

Display identical text using JavaScript filter

My search filter highlight is currently displaying [object Object] instead of <mark>match values</mark> when replacing the values. This is the code I am using: this.countries.response.filter((val) => { const position = val.value.toLowerCa ...

javascripthtmltypescriptstenciljs