Vuejs Template rendering

1

Hello can someone assist on two issue . Am using vuejs and I have realized i have two problems. Am a little bit rusty on css. One of the issue is that my collapsable button is not displaying content once you resize the screen. Also, the content of the body is displaying on the navbar.Here is my code. I have also attached images of the same;

<template>
    <div class="m-4">
        <nav class="navbar navbar-expand-lg position-relative text-right">
            
                <a class="navbar-brand navbar-logo" href="#">
                    <img src="../assets/logo.png"  height="100" alt="navbar brand">
                </a>
                <!--Toggle Collapsible Button-->
                    <button class="navbar-toggler" 
                    type="button" 
                    data-bs-toggle="collapse"
                    data-bs-target="#collapsibleNavbar"
                    @click="collapse = !collapse"
                >
                
                <span class="navbar-toggler-icon"></span>
                
                </button>
                
                <div class="collapse navbar-collapse  justify-content-center" id="collapsibleNavbar">
        
                    <ul class="navbar-nav">
                        
                        <li class="nav-item mr-3" >
                            <router-link to="/about" class="nav-link" >About </router-link>
                        </li>
                        <li class="nav-item mr-3">
                            <router-link to="/solutions" class="nav-link" >Solutions</router-link>
                        </li>
                        <li class="nav-item mr-3">
                            <router-link to="/careers" class="nav-link" >Careers</router-link>
                            </li>
                            <li class="nav-item mr-3">
                                <router-link to="/contact" class="nav-link" >Contact</router-link>
                            </li>
                            <li class="nav-item mr-3">
                                <router-link to="/pricing" class="nav-link" >Pricing</router-link>
                            </li>
                            <li class="nav-item mr-3">
                                <router-link to="/developers" class="nav-link" >Developers</router-link>
                            </li>
                    
                    
                        </ul>
                </div>
              
    
    
    
    
    
    
    
    
            
    
            
    
             </nav>
    </div>
    
    
    </template>
    
    
    <script>
    import router from '@/router';
    
    export default {
        router:{router}
    }
    </script>
    <style>
    @import url('https://fonts.googleapis.com/css?family=Roboto');
    div{
        background-color:slateblue;
        
        
    }
   
    
   
    
      
    </style>

content-displaying i the body
content-displaying i the body762×613 12.3 KB

2

maybe height of navbar is too big in css so it’s like that?
you didnt show css

3

:smile: Lemme add it asap, Here is the styling*
`

<style>
    @import url('https://fonts.googleapis.com/css?family=Roboto');
    nav {
      padding: 30px;
    }
    
    div{
        background-color:slateblue;
        
    }
*here is the layout page *
#app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; } nav a { font-weight: bold; color: #2c3e50; } nav a.router-link-exact-active { color: #42b983; }
4

the layout page look like this

  <div id="app">
    <LayoutPage />
    <router-view />
  </div>
</template>

<script>
import LayoutPage from "@/components/LayoutPage.vue";
export default {
  name: "HomeView",
  components: {
    LayoutPage,
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>
type or paste code here
5

Here is the developer layout

<template>
  <div class="developer">
    <h1>This is the developers page</h1>
  </div>
</template>

<script>
export default {
  name: "DevelopersPage ",
  components: {},
};
</script>
6

</template>

where does this start?
looks like there’s only closing tag but not opening one

7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.