Monday

Bulma navbar example with menu toggle not leading to desired result

Issue

I am having troubles getting the navbar working the way I want. I am working with the newest bulma.io css file. In general I see that the bulma page itself shows a little bit different from my Chrome window ... not all the examples are working like the text say they would.

So I tried cooking it down, all I want in the end is a logo left and dropdown plus a button right:

So reduced the code to try that

<link href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css" rel="stylesheet"/>
<html>
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>test</title>
   </head>
   <body>
      

<nav class="navbar" role="navigation" aria-label="main navigation">
   <div class="navbar-brand">
      <a class="navbar-item" href="https://bulma.io">
         <img src="https://bulma.io/images/bulma-logo.png" width="112" height="28">
      </a>

   </div>

 
   <div class="navbar-end">
      <div class="navbar-item has-dropdown is-hoverable">
         <a class="navbar-link">
            More
         </a>
         <div class="navbar-dropdown is-boxed">
            <a class="navbar-item">
               test
            </a>
            <a class="navbar-item">
               test 2
            </a>
         </div>
      </div>
      <div class="navbar-item">
      <div class="buttons">
         <a class="button is-primary">
            <strong>Sign up</strong>
         </a>
         <a class="button is-light">
            Log in
         </a>
      </div>
      </div>
   </div>
 </nav>
    </body>
</html>

but I got:

(the button on "More" to toggle the menu does not work).

Solution

Try this:

Add the below CSS styles in your code.

.navbar{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.navbar-end{
    display: flex;
}

<link href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css" rel="stylesheet"/>
<html>
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>test</title>
   </head>
   <body>
      

<nav class="navbar" role="navigation" aria-label="main navigation">
   <div class="navbar-brand">
      <a class="navbar-item" href="https://bulma.io">
         <img src="https://bulma.io/images/bulma-logo.png" width="112" height="28">
      </a>

   </div>

 
   <div class="navbar-end">
      <div class="navbar-item has-dropdown is-hoverable">
         <a class="navbar-link">
            More
         </a>
         <div class="navbar-dropdown is-boxed">
            <a class="navbar-item">
               test
            </a>
            <a class="navbar-item">
               test 2
            </a>
         </div>
      </div>
      <div class="navbar-item">
      <div class="buttons">
         <a class="button is-primary">
            <strong>Sign up</strong>
         </a>
         <a class="button is-light">
            Log in
         </a>
      </div>
      </div>
   </div>
 </nav>
    </body>
</html>

Answered By - Par Tha

This Answer collected from stackoverflow and tested by AngularFix community admins, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Monday

Bulma navbar example with menu toggle not leading to desired result

Issue

Solution

0 comments:

Post a Comment

Popular Posts

Labels