Double-Lined Top Bar Design with Foundation 5 (CSS)

My current goal:

The requested code: 

 <div class="contain-to-grid">
      <nav class="top-bar" data-topbar role="navigation">
  <ul class="title-area">
    <li class="name"><h1><a href="#">LOGO</a></h1></li>
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
  </ul>

  <section class="top-bar-section">
    <ul class="right">

        <li><a href="#">RETURN<br/>home</a></li>
            <li><a href="#">TASTE<br/>new menu</a></li>
            <li><a href="#">ATTEND<br/>events</a></li>
            <li><a href="#">EXPLORE<br/>our culture</a></li>
            <li><a href="#">BOOK<br/>your place</a></li>

        </ul>
      </li>
    </ul>
</section>
</nav>
      </div>

However, my current issue is this:

Suggestions on how to achieve my desired outcome? Additionally, how can I adjust the height of the top bar while keeping everything centered vertically as it currently appears?

htmlcsszurb-foundationmultilinenavigationbar

Answer №1

  1. Optimize your code by removing unnecessary tag closures and ensuring proper indentations. This will help you identify errors much faster.

<div class="contain-to-grid">
<nav class="top-bar" data-topbar role="navigation>
<ul class="title-area>
<li class="name><h1><a href="#">LOGO</a>
<li class="toggle-topbar menu-icon><a href="#"><span>Menu</span>
</ul>
<section class="top-bar-section>
<ul class="right>
<li><a href="#">RETURN<br/>home</a>
<li><a href="#">TASTE<br/>new menu</a>
<li><a href="#">ATTEND<br/>events</a>
<li><a href="#">EXPLORE<br/>our culture</a>
<li><a href="#">BOOK<br/>your place</a>
</ul>
</section>
</nav>
</div>

  1. Consider adding this CSS snippet:

.top-bar-section > .right > li > a{
    line-height: inherit;
}

Answer №2

For a responsive design, please utilize the code snippet provided below:

<div class="contain-to-grid fixed">
  <nav class="top-bar" data-topbar role="navigation">
    <ul class="title-area">
        <li class="name"><h1><a href="#">LOGO</a></h1></li>
        <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span</a</li>
    </ul>
    <section class="top-bar-section">
        <ul class="right">
            <li><a href="#">RETURN<br/><span style="float: left;margin-top: -20px;">home</span></li>
            <li><a href="#">TASTE<br/><span style="float: left;margin-top: -20px;">new menu</span></a></li>
            <li><a href="#">ATTEND<br/><span style="float: left;margin-top: -20px;">events</span></a></li>
            <li><a href="#">EXPLORE<br/><span style="float: left;margin-top: -20px;">our culture</span></a></li>
            <li><a href="#">BOOK<br/><span style="float: left;margin-top: -20px;">your place</span></a></li>
        </ul>
    </section>
  </nav>
</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

Curved Edges CSSPIE with a Touch of CSS Gradient

We are facing an issue with the code below, which creates a basic box with rounded corners and a gradient. We have applied CSSPie to achieve this effect, but we have observed that in all versions of Internet Explorer, the rounded corners do not work due to ...

htmlinternet-explorercssrounded-cornerscss3pie

How can we stop a form from being submitted when the input field is

Similar Question: How to prevent submitting the HTML form’s input field value if it empty <?php include '../core/init.php'; if(isset($_POST['nt']) && isset($_POST['ntb'])){ mysql_query("INSERT INTO `pos ...

phpjavascriptjqueryhtmlcss

What is the process for updating a placeholder text after the user makes a guess or enters

My latest project involves creating a fun guessing game where players have to identify the driver based on the teams they have driven for. The game displays the number of guesses allowed and keeps track of how many attempts the player has made so far. For ...

javascripthtmlplaceholder

Wow JS does not seem to be compatible with one-page scrolling feature

I have been using a plugin found at for my website. Whenever I switch slides, I want all elements within each section to have animations using another plugin I found here: https://github.com/matthieua/WOW In the past, I've had success with WOW JS, ...

jquerycssscrollwow.js

Tips for transferring input values between two PHP pages

I need to save various input values in a MySQL database, such as first name, last name, phone number, and mobile number. With a select query, I can retrieve all the entries from the database and display them on a single webpage. When a user clicks on a sp ...

phpmysqlhtmlcss

The performance of ASP.net text-boxes is inconsistent

After days of searching for a solution, I am still unable to resolve my issue. My website features a simple web-form with text-boxes that are supposed to appear when the user selects the "custom search" option. While testing locally, everything works fine. ...

asp.netcsstexttextboxmarkup

The iFrame is set to a standard width of 300 pixels, with no specific styling to dictate the size

My current challenge involves utilizing the iframe-resizer package to adjust the size of an iframe dynamically based on its content. However, even before attempting any dynamic resizing, I encounter a fundamental issue with the basic iframe: it stubbornly ...

javascripthtmlcssiframe

The columns in the table are hidden when resizing

There are three tables in my code. The first table does not have any margin set, while the next two tables have a margin-left property to slightly move them to the left side. However, when I resize the window, I'm unable to see the last column in the ...

htmlcsscss-float

Reorganize divisions using Bootstrap

I am exploring different ways to manage responsiveness through the reordering of divs. While I am aiming for a solution that is highly flexible, any suggestion would be appreciated. Desktop View: https://i.stack.imgur.com/boSOa.png Mobile View: https:// ...

javascriptjqueryhtmlcsstwitter-bootstrap

Learn how to cycle through three different texts that appear in the same spot using smooth transitions

I am working with three different rows that contain the Typography component. My goal is to display the first row, followed by the second, then the third, and back to the first one in a continuous loop. All three rows should be shown in the same location, ...

javascripthtmlcssreactjs

My attempts to load the .mtl and .obj files using THREE.js have been unsuccessful

I've been working on creating a 3D model viewer using three.js, but I'm encountering issues with loading .mtl and .obj files. Despite following a tutorial at , the only model that loads successfully is the female one. Here is the code snippet I ...

javascripthtml3dthree.jsobjloader

ng-class not functioning properly when invoked

In my controller, I have the following function: $scope.menus = {}; $http.get('web/core/components/home/nav.json').success(function (data) { $scope.menus = data; $scope.validaMenu(); }).error(function () { console.log('ERRO') }); ...

javascripthtmlcssangularjsng-class

Identifying the moment when the body scroll reaches the top or bottom of an element

I have been experimenting with javascript and jquery to determine when the window scroll reaches the top of a specific element. Although I have been trying different methods, I have yet to see any successful outcomes: fiddle: https://jsfiddle.net/jzhang17 ...

javascriptjqueryhtmlcss

Switch the menu state to closed when we click outside of it while it's open

I'm currently working on a scenario involving a menu that toggles when a button is clicked. The issue I'm facing is that when I click on the menu button, it opens correctly. However, the problem arises with the following code: Whenever I click ...

javascriptjqueryhtml

What is causing the background image size to adjust when the carousel is toggled?

Can you help me understand why the background-image increases in size vertically when transitioning from url/path to url/path2? I need it to stay the same size as it toggles through all the images. What mistake am I making and how can I correct it? Snipp ...

htmlcssdebuggingbootstrap-4

The content of the HTML request may not always be displayed exactly as it appears in the browser

I've been trying to extract comments from a website using Python and urllib. Although I am successful in obtaining the HTML, I noticed that the comment section is missing. Here's what my Python code retrieves: <div data-bv-product-id="681012 ...

pythonhtmlurllib

What is the process for transferring selections between two select elements in aurelia?

I am attempting to transfer certain choices from select1 to select2 when a button is clicked. Below is my HTML code: <p> <select id="select1" size="10" style="width: 25%" multiple> <option value="purple">Purple</option> &l ...

javascripthtmlaurelia

Styling radio buttons with CSS

I've been struggling to align my radio buttons next to their labels. Despite numerous changes to the CSS, I can't seem to get my text boxes, radio buttons, and comment box to line up properly. Specifically, the second radio button is causing alig ...

htmlcss

Undetected gap within boundaries

I have a container that contains four div elements. Each inner div has an absolute position and the same size. When I add borders to the inner divs, instead of creating circles, I end up with something that looks like a sliced cake: https://i.sstatic.net/ ...

css

Error: Attempting to access 'position' property of undefined object in ThreeJs is causing a TypeError

I am currently facing an issue with integrating a 3D model into the background of the hero section on my website. The integration works fine, but I noticed that when I manually resize the window, the 3D model does not adjust to the new size. Additionally, ...

javascripthtmlcssthree.js