Bootstrap navbar hiding header and text

Bootstrap navbar hiding header and text
0

#1

Hi all, my first time here. I’m working on my tribute page and am having trouble with my bootstrap navbar. When I click links to other parts of my page the heading and the top 3 lines in the paragraph are hidden behind the navbar.
I’ve tried all the suggestions for padding and margins at W3 schools as well as stack overflow but the result is always the same. Also when I shrink the page to phone size the navbar covers the first image of the page. I’m trying to accomplish this with html and or css as I haven’t started the javascript lessons yet. Any help greatly appreciated. My code below. Thanks in advance.

<!DOCTYPE html>
<html lang="en">
<head>


    <title>Leonardo da Vinci</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <!--<base target="_blank">-->
    <style type="text/css">
    
    body {
  background-color:#f9f2ec
	}
	h1 {
		color:#cc0000;
		padding-top:80px;
	}
	h4 {
		
		padding-left:40px;
	}
	.smaller-image {
		width:200px;
		padding-left: 40px;
	}
	p {
		padding-left:20px;
		background-color:#f9f2ec;
		color:#000000;
	}
	.medium-image {
		width:250px;
	}
	.img-border {
  color:#ac7339;
  border:2px;
  border-style:solid;
  border-radius:3%;
    }


</style>
</head>
<body>


<h1>Leonardo da Vinci</h1> 

<nav class="navbar navbar-inverse navbar-fixed-top">
	<div class="container-fluid">
		<div class="navbar-header">
		<a class="navbar-brand" href="#">Elite Web Development</a>
		</div>
		
		<ul class="nav navbar-nav">
			<li class="active"><a href="#">Home</a></li>
			<li><a href="#Early Life">Early Life</a></li>
			<li><a href="#Education">Education</a></li>
			<li><a href="#Career">Career</a></li>
			<li><a href="#Art">Art</a></li>
			<li><a href="#Inventions">Inventions</a></li>
			<li><a href="#Later Life">Later Life</a></li>
		</ul>
		
	</div>
</nav>
<!--Image of Leonardo-->
<div class="container">
<div class="row">
	<div class="col-sm-4">
	    <img src="https://www.dropbox.com/s/j6dpgcpebrvpey8/ACB_Leonardo_render.png?raw=1" class="smaller-image img-responsive">
		
	</div>
	<!--<div class="col-sm-8"><img src="https://www.dropbox.com/s/ilda09wkwtoz7ua/universal-genius.jpg?raw=1" class="img-responsive"></div>-->
	</div>
</div>

<a name="Early life"> <h4>Early life</h4></a>
  <p>
    Born on April 15, 1452 in Anchiano Italy Leonardo di ser Piero da Vinci was a renaissance polymath whose areas of interest included invention, painting, sculpting, architecture, science, music, mathematics, engineering, literature, anatomy, geology, astronomy, botany, writing, history and cartography. He has been variously called the father of paleontology, ichnology and architecture and is widely considered one of the greatest painters of all time.<br> He was the illegitimate son of Ser Piero da Vinci, a prominent notary of Florence, who had no other children until much later. Ser Piero raised his son himself, a common practice at the time, arranging for Leonardo's mother to marry a villager.<br>
  </p>
  <a name="Education"><h4>Education</h4></a>
  <p>
  When Leonardo was 15, his father apprenticed him to Andrea del Verrocchio, the leading artist of Florence and a characteristic talent of the early Renaissance.
  For about a decade, da Vinci refined his painting and sculpting techniques and trained in mechanical arts. When he was 20, in 1472, the painters guild of Florence offered da Vinci membership, but he remained with Verrocchio until he became an independent master in 1478.<br>
  </p>
  <a name="Career"><h4>Career</h4></a>
  <p>
Around 1482, he began to paint his first commissioned work, The Adoration of the Magi, for Florence's San Donato, a Scopeto monastery.
  </p>
<p>
However, da Vinci never completed that piece, because shortly thereafter he relocated to Milan to work for the ruling Sforza clan, serving as an engineer, painter, architect, designer of court festivals and, most notably, a sculptor. The family asked da Vinci to create a magnificent 16-foot-tall equestrian statue, in bronze, to honor dynasty founder Francesco Sforza. Da Vinci worked on the project on and off for 12 years, and in 1493 a clay model was ready to display. Imminent war, however, meant repurposing the bronze earmarked for the sculpture into cannons, and the clay model was destroyed in the conflict after the ruling Sforza duke fell from power in 1499.<br>
  </p>
  <a name="Art"><h4>Art</h4></a>
  <p>
Although relatively few of da Vinci's paintings and sculptures survive in part because his total output was quite small, two of his extant works are among the world's most well-known and admired paintings.
The first is da Vinci's The Last Supper, painted during his time in Milan, from about 1495 to 1498. A tempera and oil mural on plaster, The Last Supper was created for the refectory of the city's Monastery of Santa Maria delle Grazie. Also known as The Cenacle, this work measures about 15 by 29 feet and is the artist's only surviving fresco. It depicts the Passover dinner during which Jesus Christ addresses the Apostles and says, One of you shall betray me. One of the paintings stellar features is each Apostle's distinct emotive expression and body language. Its composition, in which Jesus is centered among yet isolated from the Apostles, has influenced generations of painters.<br>When Milan was invaded by the French in 1499 and the Sforza family fled, da Vinci escaped as well, possibly first to Venice and then to Florence. There, he painted a series of portraits that included La Gioconda, a 21-by-31-inch work that's best known today as Mona Lisa. Painted between approximately 1503 and 1506, the woman depicted,especially because of her mysterious slight smile has been the subject of speculation for centuries. In the past she was often thought to be Mona Lisa Gherardini, a courtesan, but current scholarship indicates that she was Lisa del Giocondo, wife of Florentine merchant Francisco del Giocondo. Today, the portrait,the only da Vinci portrait from this period that survivesis housed at the Louvre Museum in Paris, France, where it attracts millions of visitors each year.
  </p>
  <!--Images of the last supper and the mona lisa-->
  <div class="container">
<div class="row">
	<div class="col-sm-6 image-responsive">
	 <!--  <a href="https://en.wikipedia.org/wiki/Last_Supper"> <img class="img-border" src="https://www.dropbox.com/s/uybyfkbbrxdecxd/350px-Leonardo_da_Vinci_-_Ultima_cena_-_ca_1975.jpg?raw=1" alt="last supper"></a></div>
		
	<div class="col-sm-6 image-responsive">
	<a href="https://en.wikipedia.org/wiki/Mona_Lisa"><img class="img-border" src="https://www.dropbox.com/s/uu37i5blocxj1ga/Mona%20Lisa.jpg?raw=1" alt="mona lisa"></a></div>
	</div>-->
</div>
 <a name="Inventions"><h4>Inventions</h4></a>

 <p>   Leonardo da Vinci may well have been the greatest inventor in history, yet he had very little effect on the technology of his time. Da Vinci drew sketches and diagrams of his inventions, which he preserved in his notebooks, but either he lost interest in building them or was never able to convince one of his wealthy patrons to finance construction of his designs. As a result, almost none of da Vinci's inventions were built during his lifetime. And, because he never published his diagrams, nobody else knew about them until his notebooks were discovered long after his death.<br>
That's a pity, because da Vinci's designs were spectacularly ahead of his time. If they had been built, they might have revolutionized the history of technology, though many of them may have been impossible to build with the tools available in the 15th and 16th centuries. In recent years, however, engineers have begun to construct models of da Vinci's amazing machines and most of them actually work.
</p>
<!--Images of aeroplane and trebuchet-->
 <div class="container">
<div class="row">
	<div class="col-sm-6 image-responsive">
	   <!-- <img class="img-border" src="https://www.dropbox.com/s/6ggpxg73eaxvszz/aeroplane.jpg?raw=1" alt="aeroplane"></div>
		
	<div class="col-sm-6 image-responsive"><img class="medium-image img-border" src="https://www.dropbox.com/s/9n9odg8eclg5k1m/da_vinci_trebuchet_built_angled%20900.png?raw=1" alt="trebuchet">
	</div>-->
</div>
 
<a name="Later life"><h4>Later life</h4></a>
         
 <p>
 Da Vinci left Italy for good in 1516, when French ruler Francis I generously offered him the title of Premier Painter and Engineer and Architect to the King, which afforded him the opportunity to paint and draw at his leisure while living in a country manor house, the Chateau of Cloux, near Amboise in France. Although accompanied by Melzi, to whom he would leave his estate, the bitter tone in drafts of some of his correspondence from this period indicate that da Vinci's final years may not have been very happy ones. (Melzi would go on to marry and have a son, whose heirs, upon his death, sold da Vinci's estate.
 Da Vinci died at Cloux (now Clos-Luc'e) in 1519 at age 67. He was buried nearby in the palace church of Saint-Florentin. The French Revolution nearly obliterated the church, and its remains were completely demolished in the early 1800s, making it impossible to identify da Vinci's exact gravesite.
 </p>
 <!--Link to wiki-->
  <a href="https://en.wikipedia.org/wiki/Leonardo_da_Vinci">More on Leonardo's life</a>
  <br>
  <p>
  <h3>Resources</h3>
  WWW.histoy.com/topics/leonardo-da-vince.<br>
  www.leonardoda-vinci.org<br>
  https://en.wikipedia.org/wiki/Leonardo_da_vinci<br>
  google.com/images
  </p>
  
  </div>
  </body>
</html>

#2

For some reason only a 1/4 of my code copied over so hopefully the description is enough.


#3

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.

In general,when you need to post an entire project like the one you have here, it is best to post a link to your code (i.e. Codepen or JSFiddle), because then as you get help an make changes, you don’t have to keep posting the code for everyone to look at. Instead, you update the Codepen or JSFiddle and everyone can see the latest version of what you are working on.


#4

I think the only way to achieve this without JavaScript is to add a top padding of 60px to the h4 tag. So your css for h4 would look like this: h4 {

	padding-left:40px;
	padding-top: 60px;
}

For the issue you are having with the mobile view, you can add media queries to your CSS and push the h1 down to make space for the nav links.


#5

Hey. A very simple fix for this issue is to add padding and negative margin to the navbar’s targets. That will compensate for the height of the navbar. In your case, it should be like this:

h4 {
  margin-top:-60px;
  padding-top:60px;
}

Also, keep in mind that ids can’t have spaces in them. So, “Early Life” should be “early-life” or something like that.

Edit: didn’t notice the other question. For that one, you could just implement the toggling future. You would need to add a button inside your navbar-header div:

    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-example" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>    

And then wrap your navbar-nav ul in a div that will activate the toggling:

<div class="collapse navbar-collapse" id="nav-example">
  <ul class="nav navbar-nav">
      ...
  </ul>
</div>

#6

Thank to you all for an amazingly quick response. FCC people are awesome! and I promise to do a better job of posting in the future.:sunglasses: