I need some help creating a responsive/fluid CSS navbar from you CSS ninja

[fbclh]

Hi there folks, I need some help from you CSS ninja

I need to build and clone a navbar from scratch using HTML and CSS only, it is simple but because I have been using Bootstrap for almost everything in the past, now I find it a bit tricky when using only pure vanilla CSS.

I have done the HTML and parts of the CSS and basically, my question is regarding the positioning and best practice and how to make it responsive and fluid, as I have been trying to make it look exactly the same as the one in the picture but I can not get it right until now even when Googling and looking at Stack Overflow.

Here is the navbar Image:

And here is my HTML and CSS:

<header className='App-header'>
				<nav>
					<img src={logo} className='App-logo' alt='logo' />
					<ul className="menu">
						<li className='politics'>
							<a href='#'>POLITICS</a>
						</li>
						<li className='business'>
							<a href='#'>BUSINESS</a>
						</li>
						<li className='tech'>
							<a href='#'>TECH</a>
						</li>
						<li className='science'>
							<a href='#'>SCIENCE</a>
						</li>
						<li className='sports'>
							<a href='#'>SPORTS</a>
						</li>
					</ul>
				</nav>
			</header>

@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,400i&display=swap');

html,
body {
	background-color: white;
	margin: 0;
	padding: 0;
}

/* navbar */
nav {
	background-color: #ffffff;
	font-family: Lato-Regular;
	font-size: 14px;
	color: #3e433e;
	border-bottom: 1px solid #979797;
	list-style: none;
	text-align: ;
	width: 1400px;
	height: 56px;
}

img {
	height: 45px;
	margin-top: 7px;
	margin-left: 131px;
}

ul {
	display: inline-block;
	text-align: right;
}

nav > ul > li {
	display: inline-block;
	padding-right: 29px;
	margin-top: 20px;
	margin-bottom: 19px;
}

nav > ul > li > a {
	text-decoration: none;
	color: #3e433e;
}

nav > ul .politics a:hover {
	color: #ff001f;
}

nav > ul .business a:hover {
	color: #bd10e0;
}

nav > ul .tech a:hover {
	color: #4990e2;
}

nav > ul .science a:hover {
	color: #7cbc37;
}

nav > ul .sports a:hover {
	color: #f6a623;
}

So what I am doing wrong and how I can fix the CSS to make it look exactly the same responsive and fluid, and how I can improve my code?

[lasjorg]

Is this from a React app? Because you have className="" in the HTML.

Anyway I would suggest looking into Flexbox, quick example
https://codepen.io/anon/pen/YoMYaY

A Complete Guide to Flexbox | CSS-Tricks

Basic concepts of flexbox

[fbclh]

Hi @lasjorg, yes it is a React app why? And I use:

npx create-react-app my-app
cd my-app
npm start

The all JSX looks like this:

function Navbar() {
	return (
		<div className='App'>
			<header className='App-header'>
				<nav>
					<img src={logo} className='App-logo' alt='logo' />
					<ul className='menu'>
						<li className='politics'>
							<a href='#'>POLITICS</a>
						</li>
						<li className='business'>
							<a href='#'>BUSINESS</a>
						</li>
						<li className='tech'>
							<a href='#'>TECH</a>
						</li>
						<li className='science'>
							<a href='#'>SCIENCE</a>
						</li>
						<li className='sports'>
							<a href='#'>SPORTS</a>
						</li>
					</ul>
				</nav>
			</header>
		</div>
	);
}

export default Navbar;

I will have a look at the links and see if can make any progress, I will let you and other campers know by posting and commenting here.

Thank you

[GOKU-RD]

I make it as it is in image but i can’t strike that how to make underline as it is on the image.

[GOKU-RD]

[GOKU-RD]

[lasjorg]

@fbclh

yes it is a React app why?

Because className is not a valid HTML attribute. It is used with JSX because it is JavaScript and class is a reserved word.

@GOKU-RD

I make it as it is in image but i can’t strike that how to make underline as it is on the image.

It’s just a border-bottom on the nav. I already posted an example.

[fbclh]

I made some progress but I am still working on it, in particular trying to make it responsive and fluid based on the mockups I have here. So I will post it soon…

[lasjorg]

How does the nav look on smaller screen sizes in the mockup, is it using a mobile nav?

[fbclh]

Hi, sure…

Mobile > 750px:

Mobile > 350px:

But the details is that I need to use an image to create the hamburger menu and not a CSS solution hamburger menu, created from scratch.

[lasjorg]

Here is another quick example with the mobile nav, it’s just to show you one possible way of doing it.
https://codepen.io/anon/pen/QXPzwZ

[fbclh]

Thanks @lasjorg I will have a look at it. I have been busy doing one of those job challenges/test, which I actually succeeded!

[lasjorg]

Congrats!
There’s nothing like a little pressure to get the gears turning.