Header breakers help

[JamieRDesign]

Hi,

I’ve been trying to fix an issue with these breakers between the header menu options however I’m struggling to fix the issue.

I’d like the teal breakers to not show after the last piece of text on either side. ( right of “art of maturation”, right of “shop” ). Here’s the CSS Code, the menu is set up as two menus (primary left and primary right) using the Imprezza theme on WordPress as a base.

https://imgur.com/nFUXT78

/* header */

header.l-header .w-nav > ul > li > a:after {content:”; position:absolute; top:50%; right:0; bottom:0; display:block; margin-top:-10px; width:2px; height:20px; background:#6dc9c8;}

header.l-header .w-nav > ul > li:last-child > a:after {display:none;}

header.l-header nav.w-nav > ul > li ul li a {padding:7px 20px !important; line-height:1 !important;}

—

[Beverleyh]

A helpful response to the current question format unfortunately relies on a potential helper having handy access to a live website using the theme you specified, and a desire to poke about in an unfamiliar codebase via the developer toolbar (which is only available on desktop). This is going to severely limit the likelihood of receiving help.

To improve our ease of offering help, and increase your chances of receiving it, try extracting the pertinent HTML and CSS (via the aforementioned developer toolbar – F12) and creating a live demo in CodePen. Note that we only need minimal code – just enough to illustrate the problem. Help us to help you.

In the meantime, as a general tip, try looking into the :nth-child() selector and/or :nth-of-type() selector in order to target the element without adding specific element classes (assuming that is the issue you’re having).

[JamieRDesign]

My apologies, here’s a link to the website. Thank you for the help so far!

http://murraywhiskey.uk.w3pcloud.com/

[Beverleyh]

Sorry – I’m not at a desktop, and don’t fancy poking about in the developer toolbar, or filtering through all the excess code and distractions of a live website in order to troubleshoot for you.

To help make it easier for us to provide assistance, and remove any device restrictions of the dev toolbar, try extracting the pertinent HTML and CSS into a simplified CodePen demo. Note that we only need minimal code – that means just enough to illustrate the problem and show us what you’ve tried.

[Author]

Posts