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
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.