I am trying to make my navbar responsive at 500px width using media queries without using the hamburger sign. I want to make the "menu" div that houses the links to be broken into a new line directly under the one with the "company-name" when the screen is reduced to anything under 500px. Anyone out here that can help?
#nav-bar {
display: flex;
justify-content: space-between;
padding-left: 10px;
background-color: #38b000;
color: #FFFFFF
}
.company-name {
font-size: 32px;
flex: 1;
}
.menu {
display: flex;
justify-content: space-evenly;
flex: 1;
max-width: 20%;
font-size: 18px;
align-items: center;
}
<nav id="nav-bar">
<h2 title="Return to Home Page"><a href="">URL Saver</a></h2>
<div >
<a href="" href="/">Login</a>
<a href="" href="/">Logout</a>
<a href="" href="/">Profile</a>
</div>
</nav>
CodePudding user response:
This seems to do as you require, though more information in the question is always useful; the code is explained in comments within the code:
/* custom CSS property: */
:root {
--flex-direction-nav: row;
}
/* simple, naive CSS reset to minimise cross-browser issues by
specifying the box-sizing algorithm, and removing margin and
padding from elements: */
*,
::before,
::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
/* setting the font-size of the <body> to allow other font-sizes
to be assigned based on the em (this is my preference, feel free
to adjust to your own preferences): */
font-size: 16px;
}
#nav-bar {
display: flex;
/* specifying the flex-direction to the value held in the custom CSS
property-value: */
flex-direction: var(--flex-direction-nav);
/* assigning 'left over' space to be placed between the elements, not
before, after and between: */
justify-content: space-between;
/* balancing the padding so the menu-bar looks well-proportioned and
'balanced': */
padding-inline: 10px;
background-color: #38b000;
color: #FFFFFF;
}
.company-name {
/* 1em is 16px, 2em is 32px: */
font-size: 2em;
/* you had assigned a max-width of 20% to the .menu element; here I specified
that the .company-name element should be four times larger than that '20%'
element, which preserves the 20% while there is space but otherwise allows
all elements to take the required space: */
flex-grow: 4;
}
.menu {
display: flex;
flex-direction: row;
flex-grow: 1;
font-size: 1.05em;
gap: 1em;
/* assigning 'left over' space to be placed between the elements: */
justify-content: space-between;
align-items: center;
}
/* in screen media, when the max-width is 500px (or less): */
@media screen and (max-width: 500px) {
/* we redefine the custom CSS property, which is automatically applied once it's
changed: */
:root {
--flex-direction-nav: column;
}
}
<nav id="nav-bar">
<h2 title="Return to Home Page"><a href="">URL Saver</a></h2>
<div >
<a href="#">Login</a>
<a lass="nav-link" href="#">Logout</a>
<a href="#">Profile</a>
</div>
</nav>
References:
box-sizing
.- CSS Custom Properties (
--*
). display
.flex-direction
.justify-content
.margin-inline
.padding-inline
.@media
.var()
.
CodePudding user response:
At a particular width you can change flex-direction to column..
CodePudding user response:
you need to add this media in the last of you css file :
@media (max-width: 500px) {
#nav-bar {
flex-direction: column;
}
.menu {
max-width: 35%;
}
}
CodePudding user response:
You can achieve that with media queries by targeting the max-with of desired-size like shown in the example if the size of the browser goes below 1700x its gonna change its flex-direction to column and change the height to auto.
* {
font-size: 40px;
margin: 0;
padding: 0;
}
.navbar-nav {
display: flex;
justify-content: center;
align-items: center;
height: 2rem;
background-color: gray;
}
.nav-links {
list-style: none;
padding: 0.5rem;
font-family: Arial, Helvetica, sans-serif
}
@media only screen and (max-width: 1700px) {
.navbar-nav {
height: auto;
flex-direction: column;
background-color: gray;
}
}
<body>
<nav >
<ul >
<li >Home</li>
<li >About</li>
<li >Services</li>
<li >Email</li>
<li >Something</li>
<li >SignUp</li>
<li >Login</li>
<li >Loremips</li>
</ul>
</nav>