html default nav with logo

[sodikz125]

Hey I want to make a basic HTML and CSS navbar which is basic logo on the left with 100px padding on the left and the menu on the right with 100px padding right without using bootstrap or any other helper that is responsive does anybody have any snippets i can look at ?

[Paulie_D]

We’d suggest that you try and create this yourself (in Codepen.io) perhaps.

We’re happy to help put with your code if you run into problems but this doesn’t sound like a major issue.

Why 100px padding? It seems oddly specific. Generally, responsiveness should require non-fixed values for widths etc.

[sodikz125]

Ok i will attempt it first .sorry for the bad image but if you see the image link that is why the padding is there https://imgur.com/a/Ivi8XN6

try look at my code pen here https://codepen.io/anon/pen/zbvdbg

[Paulie_D]

You don’t need the padding…you just need a centered container.

[sodikz125]

ok but not using bootstrap and it has to be 100px gap from left of screen and 100px from right of screen?

[Paulie_D]

So the width of the container is width:calc(100vw - 200px) and margin:auto.

Simple enough…nothing to do with Bootstrap

[sodikz125]

ok so i made a container class with those properties and the nav is still on the very left and right of the screen?

[Paulie_D]

A basic Codepen demo is required then….like this

https://codepen.io/Paulie-D/pen/moeQxY

There seems to be an issue with your current pen as it constantly reloads when i try to view it.

[sodikz125]

right ok after reading the css i understand what you have done. when shrinking it starts cutting the right side of the image can that be responsive

[Author]

Posts