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.
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.
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.
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.