logo
down
shadow

How to set has-navbar-fixed-top property only on some elements in Vue using Bulma?


How to set has-navbar-fixed-top property only on some elements in Vue using Bulma?

Content Index :

How to set has-navbar-fixed-top property only on some elements in Vue using Bulma?
Tag : css , By : Val
Date : November 29 2020, 04:01 AM

I wish this helpful for you All you need to do is make an array full of your paths (pagesWithNavBar) and a computed method (shouldHaveNavBar) that returns true or false based on if the current path in url matches any item from our array (pagesWithNavBar) and finally add a check in the head method that checks if we currently are on the page with path included in our array!
.vue file - most likely your layout -> script tag
export default {
    data() {
      return {
        pagesWithNavBar: [
          "/login", "/signup" // add here all your paths where u wish to have your navbar
        ] 
      } 
    },
    computed: {
      shouldHaveNavBar() {
        return this.pagesWithNavBar.includes(this.$route.path)
      }
    },
    head() { // since nuxt.js uses vue-meta to update the document head and meta attributes 
             // you can also use it for your own good which means adding meta tags or editing
             // the attributes of a body tag! you can learn more here
             // https://nuxtjs.org/guide/views/#html-head
             // or here
             // https://github.com/declandewet/vue-meta#recognized-metainfo-properties
      return { 
        bodyAttrs: { 
          class: this.shouldHaveNavBar ? "has-navbar-fixed-top" : ""
        }
      }
    }
}

Comments
No Comments Right Now !

Boards Message :
You Must Login Or Sign Up to Add Your Comments .

Share : facebook icon twitter icon

Fixed elements in a fixed navbar


Tag : css , By : merten
Date : March 29 2020, 07:55 AM
hop of those help? Fixed Elements are taken out of the normal flow of html page. Try to set the z-index value to these classes. Give higher e.g. z-index: 100 to those which you want to be on the top. If you could show your html, I could fix it more precisely for you :).

Bootstrap: make a dynamic div between navbar-fixed-top and navbar-fixed-bottom


Tag : html , By : Deepak Poondi
Date : March 29 2020, 07:55 AM
I wish this help you If Your Navbars are fixed. You May Add Margin in Top and Bottom of body.
<html>    
 <body>
    <div class="navbar navbar-inverse navbar-fixed-top">
              <div class="container">
                ..
              </div>
            </div>


            [DIV FOR THE REST OF THE PAGE]


            <div class="navbar navbar-inverse navbar-fixed-bottom">
              <div class="container">
                ..
              </div>
            </div>
        <style>
            body{
                 margin-top: 100px;
                 margin-bottom: 100px;
            }
        </style>
    </body>
</html>

Bulma navbar opening dropdown menu in navbar. How do I open it outside of navbar?


Tag : css , By : ChristianM
Date : March 29 2020, 07:55 AM
hop of those help? I'm developing a website in Angular 4. I decided to use the Bulma CSS framework earlier in the development process because I liked the design. Bulma has no built-in components for drop down menus so I added NgBootstrap after unsuccessfully trying to create my own. , I checked that if I make two changes, it works. Try it yourself:
.nav-right.nav-menu {
    overflow-y: visible;
}
.nav-item[_ngcontent-c1], .nav-right[_ngcontent-c1] {
    overflow-x: visible !important;
}

RTL bulma css navbar


Tag : css , By : Fred Morrison
Date : March 29 2020, 07:55 AM
it fixes the issue Well, i have solved it by digging a bit in the code and understanding what should be changed in oreder for it to work properly as RTL navbar.
We have three main sections in the navbar, and i recommend making a class for it in you app.css or whatever name you have for your css called rtl-navbar and apply it on navbar-burger, navbar-end. on top of this, you should apply direction:rtl on the main navbar container.
.navbar-rtl{
   margin-right: auto;
   margin-left: 0;
}

Bulma navbar dropdown menu opening in the navbar with scroll bar


Tag : html , By : Paul Schwarz
Date : March 29 2020, 07:55 AM
help you fix your problem So I made a navbar dropdown menu, (http://bulma.io/documentation/components/navbar/) which works, but I want it to drop the menu outside of the navbar, so you don't have to scroll it inside of the navbar. Want it to like freefall on top of the other content on my page. Does anyone know what rules I can define to make this happen? , Fixed, with css:
.nav-right {overflow-y:visible}

.navbar-item, .nav-right{overflow-x:visible}
Related Posts Related QUESTIONS :
  • React - JSS have element fade in when rendered
  • Chrome's hidden CSS scroll-snap threshold and how to change it
  • Why can't I see my linear gradient over my background image?
  • Trying to hide a div using CSS
  • How to import css to only one component?
  • Best practices for styling an element that can be positioned anywhere in a page
  • should i use media queries for responsive design with react?
  • Color words ending with a digit?
  • Long Text inside Table Cell Overflow
  • Center text in column/vertically, CSS Grid
  • MDC-Web CSS theme colors not defined
  • css transform + width + left + top transition jump on safari browser
  • How to correctly position vertical oriented text on a div?
  • Why does position: sticky; not work in react?
  • Is there a way to snake/queue the flow of items in a CSS Grid?
  • two screen widths: 375px and 1024px
  • React native - Highlight a TextInput if it's empty on form submit
  • How to get the css property of a tags in testcafe?
  • Cropping the top 10% of an image using CSS?
  • how to keep a footer at the bottom of the page, even if the content grows?
  • Firefox: How to test prefers-color-scheme?
  • Is there anyway to remove the shadow, or force vuetify menu to fully align with the left side of the screen?
  • How do I convert CSS to Styled-Components with input[type="submit"] attribute?
  • How to Bold first line of :before content in Firefox?
  • Changing diameter of Angular material spinner breaks it
  • Automatically suffix every style with !important
  • Define a class is not working globally but locally it is
  • css does not work on selected row of a tableview in order to change the text color
  • Is it possible to create a button using nothing but CSS that changes the appearance of a page?
  • Running footer "element(footer)" in paged media appear only in last page
  • responsive web design video container whitespace
  • Select last element without a class
  • CSS: Can I put text over an image without having the text overflow?
  • Add styling to an angular custom component
  • JavaFX have scroll-bar transparent for all elements (scoll pane, text area, etc)
  • How to add 'title' tag (for tooltip) in react styled components
  • Input:checked + after element not working
  • css multiple selector last one doesn't work
  • Css variable in Email Template
  • css pseudo class applied to "a" tag with multiple classes
  • How do I cause a pseudo element to span over blank grid cells?
  • Is it possible to replicate bootstrap 4 col class in CSS Grid?
  • Flexbox - first column full height
  • apply style to ul li after a div span that has a specific class
  • "Inheritance" of a CSS selector
  • Material Ui (reactjs) - Center a logo image in the appBar
  • Placing Link Text Within a Button in Angular App
  • How to center an image in ReactJS using css
  • Less - how to generate values in a loop
  • React/CSS: Using CSS stylesheets in a React app?
  • Why is Safari‚Äôs default font tracking/letter-spacing different than other browsers?
  • How to set text color depends on element class name in css3
  • Encapsulating CSS code in javascript plugin
  • How to give margin-left in proportion to margin-right?
  • change text align according to mobile device in Bootstrap 4
  • ng-deep is effecting sibling components
  • Need to change the highlighted blue color on select drop down to any color without using JavaScript/jquery (mainly in ch
  • overflow-x and overflow-y don't override overflow
  • CSS selector for class and attribute together
  • why are my media queries not working on bootstrap?
  • shadow
    Privacy Policy - Terms - Contact Us © scrbit.com