Creating and formatting a Navigation Bar with Bootstrap through codepen

Creating and formatting a Navigation Bar with Bootstrap through codepen
0

#1

Hi Everyone,

I was wondering if someone could help me. I’m very new to coding and this site and I’ve recently started the portfolio webpage challenge.

I’ve been trying to create my navigation bar as an initial step (not sure if that the right place to start) and although I’ve tried my best to follow some useful sites on this topic, I’ve become a little unglued as I can’t seem to format the navigation bar (align the text, change the font size, or background) using CSS as I’m not really sure what to use in CSS (i.e .navbar etc ). I’m sure I’m missing something fundamental or a number of things - I’m not expecting anyone to write it for me as I’d like to learn but I seem to have exhausted what resources I have so any help you could provide would be most appreciated.

I’ve attached my very brief code below - sorry if this is not the right format as it is my first time posting a question.

Thanks so much for your assistance.

Elias.

<html lang="en">
<head>
  <title>Elias Harfouch Portfolio page</title>
  <meta charset="utf-8">
    <meta name="viewport" content="width device width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
  <body>

    <!--Navbar-->
  
  <nav class="navbar navbar-inverse"                    id="my-navbar">
     <div class="container-field">
      <div class="navbar-header">
        <a href="#" class="navbar-brand">Humble Beginnings</a>
        
   </div>
   <ul class="nav navbar">
   <li class="active"><a href="#Home">Home</a></li>
     <li><a href="#About">About</a></li>
     <li><a href="Portfolio">Portfolio</a></li>
     <li><a href="Contact">Contact</a></li>
   </ul>
    </div><!--end of container-->
    </nav><!--end of navbar-->

</html>

#2

No Problem. Welcome to the forums!

I’ve edited your post for readability. When you enter a code block into the forum, remember to precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.


#3

Thanks so much Isaac. My apologies.
I’ll definitely remember that for next time.


#4

Was this problem fixed in the end? I am also doing the portfolio project and am also trying to get a Bootstrap navigation bar running in CodePen and failing miserably!