CODEWITHSUNDEEP
htmlcssbulma
J86
J86

Reputation: 15237

Centre and right aligned navigation on Bulma. Mobile devices issue

I am using the latest version of Bulma. I am trying to build a static HTML/CSS site. The navigation is rather unconventional. It has centred elements, but also right aligned elements.

On desktops, I'm happy with the look, but on mobile, the whole menu disappears.

issue visual

I have created a Codepen.

Here is the code:

HTML

<section class="hero is-large">
  <div class="hero-head">
    <nav class="navbar" role="navigation" aria-label="main navigation">
      <div class="navbar-brand">
        <a
          role="button"
          class="navbar-burger"
          aria-label="menu"
          aria-expanded="false"
          data-target="nav-menu"
        >
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
        </a>
      </div>
      <div class="navbar-menu" id="nav-menu">
        <div id="navbarBasicExample" class="navbar-menu">
          <div class="navbar-start navbar-start--centered">
            <a href="">Products</a> <a href="">Our Story</a>
            <a href="http://127.0.0.1:5500/home.html" class="logo">
              <img src="https://upload.wikimedia.org/wikipedia/commons/b/be/Lineage_OS_Logo.png" width="170" />
            </a>
            <a href="">Blog</a> <a href="">Contact Us</a>
          </div>

          <div class="navbar-end">
            <a class="cart">
              <i class="fas fa-cart-plus"></i> <span>0</span>
            </a>
            <a class="login"> <i class="fas fa-user"></i> Log in </a>
          </div>
        </div>
      </div>
    </nav>
  </div>
  <div class="hero-body is-hidden-mobile">
    <div class="container"></div>
  </div>
</section>

CSS

html,
body {
  height: 100%;
}

body {
  margin: 0;
}

.navbar-start--centered {
  flex-grow: 1;
  justify-content: center;
}

.navbar .navbar-start a {
  padding: 30px 50px;
  color: #194522;
  font-weight: bold;
  display: flex;
  align-items: center;
}

.navbar .navbar-start a.logo img {
  fill: #194522;
}

.navbar .navbar-start a.logo:hover img,
.navbar .navbar-start a.logo:hover img:hover {
  fill: #abcf39;
}

.navbar .navbar-end a {
  padding: 30px 20px;
  color: #194522;
  font-weight: bold;
  display: flex;
  align-items: center;
}

.navbar .navbar-start a:hover,
.navbar .navbar-end a:hover {
  color: #abcf39;
}

.navbar .navbar-end a i {
  padding-right: 6px;
}

#logo {
  width: 200px;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
}

.hero {
  background-color: #f3e2f3;
}

What I would like to see on mobile is for that drop down menu to have Products, Our Story, Blog and Contact Us links. I am not sure what I am doing wrong, but I suspect it is because of the unusual menu I have.

Upvotes: 0

Views: 1990

Answers (1)

Daniel Sixl
Daniel Sixl

Reputation: 2499

You have a class .navbar-menu too much. Elements with this class are hidden on mobile. With Javascript the class is-active will be added, to make it visible again on mobile – as soon as the the hamburger was clicked this style kicks in:

@media screen and (max-width: 1087px)
.navbar-menu.is-active {
    display: block;
}

You have a second, nested .navbar-menu:

<div class="navbar-menu" id="nav-menu">
        <div id="navbarBasicExample" class="navbar-menu"> <!-- still hides menu, even when hamburger was clicked -->

You can only use this class once. The nested one never gets the class is-active added, so the menu remains hidden.

Upvotes: 1

Related Questions