Troubleshooting a Header Styling Problem in Shopify Theme Sections (Liquid)

I am encountering an issue with the header styling in a specific section of my Shopify website. The header is not displaying correctly as intended. Below is the code snippet I have implemented for the header along with its styling:

Liquid Code:


  <header class="header header--middle-left header--mobile-center page-width header--has-menu">
  
    <nav class="header__inline-menu">
      <div class="links-container">
        <ul class="list-menu list-menu--inline" role="list">
          <li>
            <a id="HeaderMenu-home" href="/" class="header__menu-item list-menu__item link link--text focus-inset" aria-current="page">
              <span class="header__active-menu-item">Home</span>
            </a>
          </li>
          <li>
            <a id="HeaderMenu-catalog" href="/collections/all" class="header__menu-item list-menu__item link link--text focus-inset">
              <span>Lookbook</span>
            </a>
          </li>
          <li>
            <a id="HeaderMenu-contact" href="/pages/contact" class="header__menu-item list-menu__item link link--text focus-inset">
              <span>Necklace Stacking</span>
            </a>
          </li>
        </ul>
      </div>
    </nav>
  
  </header>

CSS Code:


.links-container {
  position: absolute;
  width: 343px;
  height: 24px;
  top: 50px;
  left: 75px;
  display: flex;
  gap: 16px;
  opacity: 1;
  background: none;
  z-index: 10;
  align-items: center;
}

.links-container a {
  text-decoration: none;
  color: inherit;
}

.header__inline-menu {
  position: absolute;
  width: 343px;
  height: 24px;
  top: 50px;
  left: 75px;
  display: flex;
  gap: 16px;
  opacity: 1;
  background: none;
  z-index: 10;
  align-items: center;
}

.list-menu--inline {
  display: flex;
  align-items: center;
  gap: 16px;
}

.list-menu--inline li {
  list-style: none;
}

Current Issue:

The header is misaligned and not styled properly on the webpage. Here is the current appearance:

View current appearance

Desired Look:

View desired look

Steps Taken:

  • I have reviewed the positioning and alignment properties but have yet to achieve the desired result.

Query:

What modifications can be made to the CSS or Liquid code to attain the preferred styling for the header? Any guidance or recommendations would be highly appreciated.

javascripthtmlcssliquid

Answer №1

I have resolved the issue:


<div class="links-container">
  <div class="single-line-menu">
    <span>Home</span>
    <span class="separator">/</span>
    <span>Lookbook</span>
    <span class="separator">/</span>
    <span>Necklace Stacking</span>
  </div>
</div>



<style>
  .links-container {
    position: absolute;
    width: 343px;
    height: 24px;
    top: 16px;
    left: 75px;
    display: flex;
    gap: 8px;
    opacity: 1;
    background: none;
    z-index: 10;
    align-items: center;
  }

  .single-line-menu {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .single-line-menu span {
    color: white;
  }

  .separator {
    margin: 0 8px;
  }
</style>

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

Why is the object not being initialized in a new API call while the string variable is successfully initialized?

There seems to be a basic issue that I am missing, as to why this is happening. GET: example.com/users //returns all data GET: example.com/users?status=1 //returns data with status = 1 GET: example.com/users // this does not work returns the same dat ...

javascriptnode.jsexpressbookshelf.js

Extract the text from an html element by utilizing xpath

This snippet contains HTML content <p class="ref Hover"> <b class="Hover Hover Hover Hover Hover">Manufacturer Part Number:</b> MC34063ADR2G<br> <b>Mounting Method:</b>&nbsp; Surface Mount& ...

htmlxmlxpathselenium-webdriverxml-parsing

Navigating a secure Koa authentication flow using compose mechanism

I have this isAuthenticated function in expressjs that composes middleware into one. Now, I need to achieve the same functionality in Koa as I am migrating from Express. How can I replicate this in Koa? import compose from 'composable-middleware&apos ...

javascriptnode.jsauthenticationkoa

Enhance the php query limit using javascript when loading additional content

Hey there, currently working on implementing a reverse infinite scroll feature for a private messaging module. Everything seems to be functioning well, except for one issue I'm facing - struggling to update the query limit. I set the maximum and lim ...

phpjavascript

I am attempting to project multiple planes onto a sphere, and while successful, I am encountering some unforeseen glitches in the process

Currently, I am working on a school project that involves mapping around 5000 images onto a sphere. Attached is a flat projection of what I intend to map. Additionally, I have a spherical model for reference. Using three.JS and the principle of the Merc ...

javascriptmaththree.jsprojection

Float Property for Aligning DIVs

Is there a way to properly align divs like the ones shown below? I tried setting a float left for both div1 and div2, but div3 ended up floating to the top right. How can I avoid this issue? <div1> <div2> How hot is it? ...

htmlcss

Displaying an iframe on an AR marker with the help of CSS3DRenderer and jsartoolkit

I am trying to achieve an interesting effect by overlaying a html iframe on top of an augmented reality marker. However, I seem to be facing some issues with the CSS3DRenderer not producing the same result as the WebGLRenderer and I'm struggling to pi ...

javascriptthree.jsaugmented-realityjsartoolkit

Bootstrap columns incorrectly stacking in vertical orientation

I'm currently in the process of learning about the Bootstrap grid system. I've implemented the following HTML code to create a row with three columns: <body> <div class="container"> <div class="row"> ...

htmlcssbootstrap-4

Rewriting URLs in Angular 2

I am a beginner in Angular 2 and I am currently working on a project that requires URL rewriting similar to that of ' '. In Zomato, when you select a city, the city name appears in the URL like ' ', and when you select a restaurant, t ...

javascriptangularjsangularangular2-routing

Complete Search with the press of Enter on the Auto Textbox

I have implemented an Ajax auto complete extender on a TextBox control. As the user begins typing, suggestive options are displayed below the input field based on data retrieved from a webservice call. When OnClientItemSelected="GetCode" is triggered, the ...

c#javascriptjqueryasp.netajaxcontroltoolkit

Leveraging the power of CSS calc() in combination with TailwindCSS styles and JavaScript

Can you explain why applying styles with TailwindCSS v3 to calculations using JS variables does not work? I'm working on a project using VueJS, and I've noticed that styling works fine when using calc as a string like this: ... <div class=&qu ...

cssvue.jstailwind-csstailwind-uitailwind-in-js

Combining strings in a loop with Angular's $scope

I have four values with the following names : $scope.restaurant.restaurantIsTop $scope.restaurant.restaurantIsRecommended $scope.restaurant.restaurantIsNew $scope.restaurant.restaurantIsPromoted Each of these values can be either 0 or 1. My goal is to c ...

javascriptangularjs

Error: Unhandled promise rejection - The method this.~(...) does not support chaining with .then() function

I'm currently working on a project that involves fetching data from a database. I am attempting to call the function getUserById() (which will use axios to communicate with the database later), and I'm encountering an issue with the line this.get ...

javascriptreactjs

What is the process for attaching the stack when initializing and throwing errors separately in JavaScript?

In all the documentation I've read, it consistently advises to both throw and initialize errors on the same line. For example: throw new Error("My error"); But what if you were to first initialize the error and then throw it on separate lines? For ...

javascript

Step-by-step guide on permanently updating the text of select options with JavaScript

Here is the code for a select option with different values: <select id="test" onchange="changeContent()"> <option>1</option> <option>2</option> <option>3</option> </select> The javascript function that chan ...

javascripthtml

Learn the process of invoking a controller function from a directive in AngularJS

I am trying to implement endless scroll feature in a dialog-box that opens on button click. Issue: My goal is to trigger the addMoreData() function from the controller when the user scrolls to the bottom of the dialog-box. Dialog-box HTML Structure: & ...

javascriptjqueryangularjs

Getting Started with Angular 2 Installation

Looking for a straightforward way to incorporate Angular2 into a single HTML file without using Bower, NPM, NuGet, or other complex methods? EDIT: Thanks to Dieuhd's suggestion, I was able to make Angular 2.0 work using the following script referenc ...

javascripthtmlangular

What is the best way to allocate a larger size to one part of a flex div?

A div is used to insert information <div class="inputs"> <div class="content">@Html.TextBoxFor(model => invoices.ProductDesc, new { disabled = "disabled", @readonly = "readonly" })</div> <div class="content">@Html.TextBo ...

css

What causes the self-invocation of "foo()" when it is assigned to the addEventListener function?

function foo() { console.log("clicked"); } element.addEventListener("click", foo()); How come foo() is invoked automatically when the script loads, but foo is not? Also, what if I want to pass an argument to the function like this: function foo(elem ...

javascriptfunction

What is the correct way to invoke a function from an external JavaScript file using TypeScript?

We are currently experimenting with incorporating Typescript and Webpack into our existing AngularJS project. While I have managed to generate the webpack bundle, we are facing an issue at runtime where the program is unable to locate certain functions in ...

javascriptangularjstypescriptwebpack