I have a question about some layout problems that I'm having since I installed commerce 2.x on my school project website. I'm using Drupal 8 for this.

Main navigation dots seem to be doing some weird things

You can see that one of the dots between each menu item are gone and another dot is slightly misplaced. Is there a way to restore this or remove all the dots maybe? The domain of my website is designmuseum.vansompel.be

I have been changing some of the css in the most upper sidebar to get the cart block next to the user account menu. Even when I revert these changes, the problem on the main navigation seems to remain. Could it be that my website is doing some automatic layout tweaks because of the new cart block? For example there is also a 10px padding above the cart block that I didn't specify myself and can't seem to find it in the code also.

.header-top-highlighted__section .block + .block {
  padding: 10px 0 0 0;

I'm still pretty nooby at theming so if someone could point me in the right direction, that would be great! Thanks!

1 Answer 1


Looks like those dots are a content on :before of the anchor tag, to remove them you could add this to your CSS files.

.header-container ul.menu li a:before {
    display: none;

This looks like it have been added by Drupal or maybe the theme you are using, i am not really sure, I recommend you read this https://www.w3schools.com/cssref/sel_before.asp to understand more about the before selector.

  • Thanks! The dots are gone indeed by adding the css you proposed. Still weird why the dots were misplaced though.
    – Sam
    Dec 24, 2017 at 12:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.