Need some help with nav bar

Need some help with nav bar
0
#1

Hi everybody,

I’m trying to make a full length left nav bar that has a logo that is suppose to be at the upper most left. The first item in the nav list is “Home” and Im trying to format the work to appear as a title but I can’t seem to find the properties that will work for it. I’m trying to adjust the text size and the padding but it doesn’t seem to work. I attached my code from codepen below. Seems like I’m not able to cut and paste the code or attach a screenshot because I’m a new user. How can I let everyone see what I’m talking about?

Pls help.

#2

Hello,
I’m sorry I don’t see a link to your codepen. If you can post it again, I’ll see if I can help you :slight_smile:

nolink
nolink.png1191x323 84.9 KB

#3

Sorry, just learned to post a link today from codepen. I didn’t realize it meant to just copy and paste the URL.
Thanks in advance,

#4

First lets start with the logo. Is this what you mean by “upper most left”?navHelp

#5

Actually, I didn’t mean that I wanted the logo in the upper left with no margin or padding to the left side. I want it to be centered in the navbar section. Now it is left justified.

#6

wrap the logo in a li inside of a ul then give the ul padding and margin of 0, text-align center and list style type none. and you should be good to go.

#7

Remove the inline styling.

Give the logo nav img {margin: auto;} margin auto will center the logo.

#8

Since, I’m not using li and ul , should i use them to make the navbar instead of nav and a?

#9

The img tag should look like this after you remove the inline styles. You can control the height, width and margin from your css style sheet.

 <img src="https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg" alt="React Native logo">
#10

Is this what you are trying to do?

image
image.png1218x762 32.4 KB

#11

THanks, it worked. Really appreciate your help!