Nav Bar Pre Styles
Nav Bar Pre Styles
navbar-contents{
display: flex;
height: 100%;
width: 100%;
flex-flow: row wrap;
/* border: 1px solid black ;
border-radius: 25px; */
column-gap: 1%;
margin: 1px 0px;
border-radius: 25px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.navbar-contents>*{
border-radius: 25px;
height:100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
/* font-size: clamp(2vw,6vw ,12vw); */
;
/* font-size: 2vw; */
}
.nav-logo{
height: 100%;
width: 22%;
/* border: 1px solid black; */
display:flex;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#logo-img{
height: 100%;
width :10vw;
cursor: pointer;
border-radius: 25px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@media (max-width: 767px){
/* .nav-logo{
height: 100%;
width: 0vw;
display:flex;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} */
#logo-img{
height: 100%;
width :20vw;
cursor: pointer;
border-radius: 25px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
justify-self: end;
}
.nav-logo{
height: 100%;
width :20vw;
}
.nav-logo>.logo-text{
height: 0vh;
width :0vw;
}
.navbar-contents{
display: flex;
height: 100%;
width: 100%;
flex-flow: row wrap;
border: 0px solid black ;
/*border-radius: 25px; */
column-gap: 1vh;
/* margin: 1px 0px; */
/* border-radius: 25px; */
/* white-space: nowrap; */
overflow: hidden;
text-overflow: ellipsis;
.navbar-contents>*{
border-radius: 5px;
height:100%;
width: 1fr;
white-space: nowrap;
overflow: hidden;
border: 0px solid;
text-overflow: ellipsis;
background-color: white;
}
.logo-text{
cursor: pointer;
display: flex;
height: 100%;
width :90%;
/* border: 1px solid black; */
justify-content: center;
align-items: center;
font-weight:bolder;
font-size:larger;
font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
/* font-family:'Times New Roman', Times, serif; */
/* font-family: "Audiowide",sans-serif; */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.nav-home{
display: flex;
height: 60%;
margin: 7px 0px;
width: 12%;
/* border: 1px solid black; */
color: black;
justify-content: center;
align-items: center;
background-color: gainsboro;
font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida
Sans', Arial, sans-serif;
}
.nav-search{
display: flex;
height: 60%;
margin: 7px 0px;
width: 12%;
/* border: 1px solid black; */
background-color: gainsboro;
color: black;
justify-content: center;
align-items: center;
background-color: gainsboro;
font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida
Sans', Arial, sans-serif;
}
.nav-help{
display: flex;
height: 60%;
margin: 7px 0px;
width: 12%;
/* border: 1px solid black; */
color: black;
justify-content: center;
align-items: center;
background-color: gainsboro;
font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida
Sans', Arial, sans-serif;
}
.nav-cart{
display: flex;
height: 60%;
margin: 7px 0px;
width: 12%;
/* border: 1px solid black; */
color: black;
justify-content: center;
align-items: center;
background-color: gainsboro;
font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida
Sans', Arial, sans-serif;
}
.nav-about{
display: flex;
height: 60%;
margin: 7px 0px;;
width: 12%;
/* border: 1px solid black; */color: black;
justify-content: center;
align-items: center;
background-color: gainsboro;
font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida
Sans', Arial, sans-serif;
}
.nav-contact{
display: flex;
height: 60%;
margin: 7px 0px;
width: 11%;
/* border: 1px solid black; */
color: black;
justify-content: center;
align-items: center;
background-color: gainsboro;
font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida
Sans', Arial, sans-serif;
.nav-search:hover,.nav-home:hover,.nav-help:hover,.nav-cart:hover,.nav-
about:hover , .nav-contact:hover{
transform: scale(1.10);
background-color: yellow;
cursor: pointer;
}