0% found this document useful (0 votes)
9 views4 pages

Nav Bar Pre Styles

Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
9 views4 pages

Nav Bar Pre Styles

Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 4

.

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;
}

You might also like