html - I want to reduce the width of one of my flex-items in my navigation bar -


how reduce width size of levi link without affecting other tabs?

this reason want when click on space between levi , rest of links goes page connected levi link. width of levi link wide. how reduce it?

in image below levi spans large area of navigation bar. want reduce it.

this image

adjust width of preview see effect of css declarations

this html

<md-whiteframe class = "main-toolbar ">    <md-theme name = "teal">        <md-toolbar id = "flex-container">       <router-link id = "nav" class = "nav-link " :to = " { name: 'levi' }" style = " text-decoration: none;  color: #ffffff; background-color: red; ;         ">levi</router-link>       <router-link class = "nav-link" :to = "{ name: 'product' }" style = " text-decoration: none;  color: #ffffff; background-color: yellow;">using levi</router-link>        <router-link  class = "nav-link" :to = "{ name: 'support' }" style = " text-decoration: none; color: #ffffff; background-color: green;"> support </router-link>           <md-button class = "md-raised md-button">            <router-link id = "navbutton" style = " text-decoration: none; color: #429bf4;" class = "nav-link" :to = "{ name: 'levi' }" > create account</router-link>   </md-button>        </md-toolbar>     </md-theme>     </md-whiteframe> 

this css

        position: -webkit-sticky;         top : 1px;             width: 100%;     }     #flex-container, #nav {          font-size: 55px;         display: flex;         flex:1;     }       #navbutton {         text-transform: none;         font-size: 19px !important;         font-family: heiti sc;     }      .nav-link { /*        display: inline;*/         font-family: helvetica neue;         cursor: pointer;         font-size: 19px;         padding: 10px;         font-weight: bolder;         margin:8px;     }      .md-display-2 {         font-family: heiti sc;         font-size: 20px;     }      #container > .md-layout { /*  background-color: #f9fbfb;*/   min-height: 100px;   border-color: black;   align-items: center;   justify-content: center; /*  border-style: dotted;*/   border-width: 1px;   padding: 8px; margin-bottom: 100px; font-family: heiti sc;  }      footer {         margin-top: 100px ;     }      .btnsubscribe {          text-transform: none;         font-family: heiti sc;         font-weight: bolder;         min-width: 66px !important;          min-height: 56px !important;         font-size: 19px !important;     }      .md-layout #inputsubscribe {      margin-left: 09px;     width: 300px;     }      .md-layout h3 {         padding: 0px;     } 

wrap router-link in div , change css given

<div id="abc" style="text-decoration: none;color: rgb(255, 255, 255);background-color: red;" class="nav-link">     <router-link id="nav" to="[object object]">levi</router-link> </div>  #flex-container, #abc{             font-size: 55px;     display: flex;     flex:1; } 

also remove cursor: pointer .nav-link , give

router-link { cursor: pointer;} 

Comments

Popular posts from this blog

php - Vagrant up error - Uncaught Reflection Exception: Class DOMDocument does not exist -

vue.js - Create hooks for automated testing -

Add new key value to json node in java -