Hey, I need help styling a navbar. Basically consists of a list of four elements. The first is the logo of the company, the three remaining items are links. I don’t want to use js, just css and I want it to look like this
Can anyone please help me! Currently this is how it looks
You should have provided the link for your project.
You just have to add margin to the links, so that there will be some distance between them.
For additional help, you can tell us about what kind of style you want to build.
@alfreps1990 Yes. That is possible to do with only CSS. Can you provide the link to your project. You can do that with display: flex; on a ul element that wraps a few li elements.
I’m sorry I can’t provide the full code but here are some screenshots of the html and css
I’ve tried position the links relatively and I can put them exactly where I want them but then it adds some weird white space to the right of the page so I went with flex, but now idk how to put the longest link (link3) where it should go
It’s impossible to debug just from looking at those code snippets.
Firstly, welcome to the forums.
While we are primarily here to help people with their Free Code Camp progress, we are open to people on other paths, too. Some of what you are asking is pretty trivial in the Free Code Camp context, so you might find that if you’re not getting the instruction and material you need in your current studies, the FCC curriculum will really help you get started. At a modest guess I’d say investing a 4-5 hours working through the curriculum here will really pay off. You can find the curriculum at https://www.freecodecamp.org/learn.
With your current questions, we don’t have enough context to know what you already know or don’t know, so it is impossible to guide you without just telling you the answer (which we won’t do).
It is pretty typical on here for people to share a codepen / repl.it / jsfiddle example of what they have tried so that anyone helping has more of an idea of what help is actually helpful.
Please provide some example of what you’ve tried and I’m sure you’ll get more help.
As mentioned earlier you can put your code in codepen and share the link.
In the future, for shorter challenges you can also put your code in the forum.
When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (
</>) to add backticks around text.
See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).
Hey thanks so much for your support and tips . Luckily for me with help of a lot of margins I was able to accomplish what I wanted and now looks great! When I finish the whole page I will post it on code pen so you can review and tinker with it.