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

Incorporating Selenium Python to display text results in a single-line format for enhanced output presentation

Looking for a way to extract data from the following HTML code: <div class="main"> <div class="firstdigitinside"> <span class="firstdigit"> <span class="firstdigithere>1 ...

pythonhtmlseleniumweb-scraping

What is the best way to extract the text from the first visible `<td></td>` table row using jQuery?

In this particular scenario, there is a table included: <table id="table"> <thead> <tr> <th>Name</th> <th>Course</th> </tr> </thead> <tbody> <tr style="display:none"> ...

javascriptjqueryhtml

Attempting to conceal a div element along with its contents using AngularJS

I am attempting to use AngularJS to hide a div and its contents. I have defined a scope variable initialized as false and passed it to the div in order to hide it. However, the div is still visible along with its content. <script type="text/javascr ...

javascripthtmlangularjs

Effective methods to prevent the `translate` transform from triggering an element to be perceived as position relative?

I am encountering an issue with an absolutely positioned div that is nested within a statically-positioned parent container. I noticed that when I apply the transform: translateY(-50%) property to the container, the child element behaves as if it were bein ...

htmlcsscss-positioncss-transforms

Manipulating CSS content property in React using Material UI

I am trying to set content: "" on my i element: "& i::before": { content: "" }, "& i::after": { content: "" }, However, the style is not being applied and I am seeing an ...

cssreactjsmaterial-ui

Managing the placement of the expanded autocomplete input in Material-UI

Whenever I use the autocomplete fields on my website, I've observed an interesting behavior. When I select multiple options, the height of the input increases significantly, causing everything below it to shift downward like this. Is there a way to m ...

javascriptcssreactjsmaterial-ui

The EJS is causing a problem with linking the style sheet

Currently, I am in the process of familiarizing myself with ejs, express, and node js. Facing an issue while trying to link my style sheet to my header, below is the code snippet and here is a https://i.stack.imgur.com/0BEIn.png. Utilizing include for bo ...

cssnode.jsejs

What could be causing an unidentified term to be included in the Vue SCSS compilation process

In my Vue application with TypeScript, I encountered an error during compilation that reads as follows: Failed to compile. ./src/style.scss (C:/../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!C:/.../node_modules/vue-loader/lib/loaders/stylePostL ...

cssvue.jssass

PHP and MySQL combination for efficient removal of multiple dropdown choices

I'm struggling to figure this out. Essentially, it's a form with multiple dropdown menus where users can select one or more items to filter MySQL data results. I want to dynamically update the other dropdown menus as the user makes selections. Fo ...

javascriptphpjqueryhtmlmysql

Enclosing two smaller boxes within a larger box

I'm attempting to replicate the layout shown in the desired.png file (specifically with an outer box surrounding two inner boxes). Currently, my code doesn't display the expected outer box around the two inner boxes. How can I modify it to achie ...

htmlcss

What could be causing my page width to only expand to 100% when using "fit-content"?

After searching extensively, I'm unable to find a solution that fits my current issue. My goal is to construct a practice ecommerce website using React. One of the components I have is a header which I'd like to occupy 100% of the screen width, c ...

javascriptcssreactjswidth

Subdomain Dilemma: Trouble with Images in Internet Explorer

Currently, I am working on creating a basic website on a subdomain. Everything appears to be running smoothly in Google Chrome except for one issue with the header image not displaying in IE8. The image link is . It seems that the problem may stem from IE ...

htmlcssimageinternet-explorercross-browser

Effective HTML element placement with CSS styling

My HTML code includes a form containing a table. Take a look: This is the Code I'm Using: <html> <head></head> <body> <form onsubmit="" id="form1" action="" method="post" name="form1" style="position: rela ...

htmlcssweb-applicationsxhtml

Which specific technological platform or framework would be most suitable for constructing a similar project?

https://i.stack.imgur.com/LL1g9.png Looking at the image provided, my goal is to allow users to navigate between pages on the Home page without having to refresh the entire browser window. I believe this can be achieved using Ajax technology, am I correct ...

javascripthtmlcssajaxfrontend

CSS responsive design: concealing elements does not prevent the page from being displayed

Imagine a scenario where I need to display a template in two different versions based on the user's device. For instance, I have utilized the following code: <div class="desktop"> <body> Hi Desktop user </body> </div> ...

javascripthtmlcssresponsive-design

Searching for a column fails to yield any results after altering the value in

Here is a snippet of code that I am working with: <!DOCTYPE HTML> <html lang="en"> <head> <title> Exact matches overview </title> <script type="text/javascript" src="/static/s ...

javascriptjqueryhtmldatatables

Manipulating layout with html5 VIDEO controls

I'm having an issue with the HTML5 video element. When I don't use "Controls," it displays with the border-radius as I specified. https://i.stack.imgur.com/KMEeJ.png However, when I add controls (which I need), an ugly border appears and overri ...

htmlvideo

The overflow hidden property in Tailwind CSS is not functioning properly during animations

I'm attempting to animate an image by moving it to different positions, but when it goes off the screen, the scrollbar appears. I tried adding overflow hidden to the parent element, but it didn't work as expected. Here is the relevant code snippe ...

htmlcssnext.jstailwind-css

Learn the process of creating various themes with Tailwind CSS

When exploring Tailwind CSS, it appears that specific colors need to be specified in classes like this: <div class="bg-yellow-200 dark:bg-gray-800"></div> However, I am interested in offering 10 different themes for users to choose f ...

htmlcsstailwind-css

Preventing the page from auto-refreshing upon button click

Recently, I have encountered an issue with a button on my webpage. Every time the button is clicked, the onclick code executes and then the page refreshes. This was not a problem before, but now it seems to be automatically refreshing the page. The curren ...

jqueryhtmlbootstrap-4