I am currently working on a React project to create a simple landing site with multiple pages. After successfully setting up the routes to navigate between pages, I encountered an issue while designing the home page. The text I added seems to be overlapping with the navigation bar, and I am struggling to position it below the navbar.
Home:
import React, {Component} from 'react';
class Home extends Component {
render(){
return (
<div>
<div>
<section>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</section>
</div>
</div>
);
}
}
export default Home;
Nav:
import React, { Component } from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Contact from './Contact';
class Nav extends Component {
render(){
return (
<Router>
<div>
<nav class="navbar fixed-top navbar-expand-sm navbar-light bg-light">
<a class="navbar-brand" href="#">Movie Garden</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav ml-auto">
<Link to={'/'} class="nav-link active">
Home
</Link>
<Link to={'/about'} class="nav-link">
About
</Link>
<Link to={'/contact'} class="nav-link">
Contact
</Link>
</div>
</div>
</nav>
<Switch>
<Route exact path='/' component={Home} />
<Route path='/contact' component={Contact} />
<Route path='/about' component={About} />
</Switch>
</div>
</Router>
)
}
}
export default Nav;
Bootstrap is the only framework being used at the moment.