Indenting Brand from left, navs from right and lining it all up with text below

Indenting Brand from left, navs from right and lining it all up with text below
0

#1

Hi there,

While doing my portfolio page(with bootstrap 4) I have encountered several problems with my navbar and alignment.

I wanted my name on the left, and links to the about, portfolio, and contact parts on the right of the navbar as shown, but I had also hoped to be able to indent them slightly. Try as I might, I can find nothing in the documentation(that I understand) that allows me to do this.

I had also hoped to be able to line the text below with the left-most edge of my name, but it is actually behind the navbar.

Can anybody help me out?

Thanks!


#2

I am not able to visualize what you are wanting to do as described above. To you have a drawing or wire frame mock-up you could share with us?

So you want all of the following html to be on the left most edge of your name? Do you mean the right most edge of your name (to the right of Gill) or before (Eric)? I am a little confused of what you are wanting to do with the following text.

 <h2>I want to line this up with my name</h2>
    <p>But nothing seems to work</p>

#3

Hi @RandellDawson,

Thanks for the reply and sorry about the delay in getting back to you, I was out of the office for a couple of days.

With regard to the indentation, the freeCodeCamp forum page is a good example. The brand and logo are on the left-hand side of the navigation bar, and three icons are on the right. In each case, they are not flat up against the edge of the screen, they are indented as seen in this screenshot:

I would like to know how to achieve the same effect, when I attempted to use the grid, my navs jumped all over the place. Can you offer any ideas?

Also, if you click on the link to my pen, you’ll notice the heading and paragraph:

</div>
  <h2>I want to line this up with my name</h2>
  <p>But nothing seems to work</p>
  </div>

Appear behind the navbar. I don’t understand why both the navbar and the heading start from the top of the screen, how can I work off the bottom of the navbar with the heading and text?

For the moment, I think I should forget about trying to line things up and work on the two mentioned problems first.

Thanks for your help!


#4

Hello again @RandellDawson,

I have managed to get my text out from behind the bar as you can see here. I am still working on the indentation though. This screenshot

shows what I mean by aligned. I have tried adding padding to the body, but this does not affect the position of the brand nor the navs. I am somewhat of a loss as to how Bootstrap ties together its elements.

Do you have any thoughts?

Thanks so much.


#5

Actually, it appears you have it figured out now.


#6

Hi @RandellDawson,

Yes I have managed to use padding. The problem is I use padding-left: 60px in the navigation bar, and 45px in the body. I know that the .container class has padding of 15px, but I’m using .container-fluid, so it’s still a mystery as to why there must be a 15 px difference.

I would also prefer that the distance between the text and edge be responsive, that is perhaps based on the available space in the screen and not fixed by me in the css. I suppose that implies using the grid. I will study up see if I can work it out.

Thanks.