Navbar in Bulma display incorrectly? - Githubissues

jgthms / bulma

Modern CSS framework based on Flexbox

https://bulma.io

MIT License

49.22k stars 3.95k forks source link

Navbar in Bulma display incorrectly? #3815

Open manhcntt21 opened 5 months ago

manhcntt21 commented 5 months ago

This is about Bulma | the Docs.

Overview of the problem

I'm using Bulma version [1.0.0] and [0.9.4] My browser is: Chrome

Description

I want to add navbar bulma to my first page, but I don't know why it move on center of page like below

Steps to Reproduce

I followed official documents

import to project


<script setup>
import ViewNotes from '@/views/ViewNotes.vue'
import ViewStats from '@/views/ViewStats.vue'
import NavBar from '@/components/layout/NavBar.vue'
</script>


3. run project
`npm run dev`

### Expected behavior

<!-- What you expected to happen -->

Navbar component should display on top webpage. This is all my [code](https://github.com/manhcntt21/vue-composition-api-noteballs/tree/noteballs-router/src)

jeroenimus commented 4 months ago

You've imported Bulma, but you are not using any of its classes. There is also no <nav-bar> tag in HTML and the tag you are looking for is <nav>.

Full example: <nav class="navbar" role="navigation" aria-label="main navigation">.

More info on how to structure your navbar can be found in the docs you referred to.