pure-css/pure

Unexpected look of the menu

sittim opened this issue · 3 comments

sittim commented

Unexpected look of the menu

Copied Horizontal Menu code into my test menu, but it does not look right

Expected behavior

Expecting the Brand to be vertically aligned with the menu

Actual behavior

The Brand is vertically in the middle:

image

Steps to Reproduce

The following is the source:

<html>
<head>
<title>test</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.3/build/pure-min.css" integrity="sha384-cg6SkqEOCV1NbJoCu11+bm0NvBRc8IYLRGXkmNrqUBfTjmMYwNKPWBTIKyw9mHNJ" crossorigin="anonymous">
</head>

<body>
  <!-- Menu -->
  <div class="header">
    <div class="pure-menu pure-menu-horizontal">
      <a href="#" class="pure-menu-heading pure-menu-link">BRAND</a>
      <ul class="pure-menu-list">
        <li class="pure-menu-item">
          <a href="#" class="pure-menu-link">News</a>
        </li>
        <li class="pure-menu-item">
          <a href="#" class="pure-menu-link">Sports</a>
        </li>
        <li class="pure-menu-item">
          <a href="#" class="pure-menu-link">Finance</a>
        </li>
      </ul>
    </div>
  </div>
</body>
</html>

Environment

  • Pure version: From CDN

  • Browser name and version: Google Chrome is up to date Version 83.0.4103.116 (Official Build) (64-bit) AND Firefox 77.0.1 on Mac OSX 10.14.6

  • Link to your project or example: Available Only on the local machine.

redonkulus commented

Looks like the vertical-align:middle style is what is causing this issue. Removing this style fixes the heading but I'm not sure what other issues happen (if any).

sittim commented

OK, this was my challenge with this package, I am not a front end designer, therefore I use code blocks to get the desired look. Since it did not work as presented, I had to move on.

kachick commented

I'm a nobie of the front-end stack. Honestly, I have faced same issue 😅 This trap avoided on my chrome when using <!doctype html> instead of <html>.