Please enable JavaScript.
Coggle requires JavaScript to display documents.
1.10: Single Page Scrolling Navigation (Responsive Single Scrolling…
1.10: Single Page Scrolling Navigation
use scrolling navigation to direct users to website content instead of linking to an external site;
website content is only inside the body element of your code. Everything outside of the body element is not part of your website's content.
only single html, a single head, and a single body element inside an HTML document.
inside the body, create a new div with the class container or container-fluid for each section of your site on your index.html page.
copy and paste the content from your FAQ, About, and Contact pages into your containers.
adjust margins and padding so the divs are large enough to fill the viewport.
ensure you don't have multiple elements with the class container or container-fluid within each other. Bootstrap's "container(-fluid)" classes aren't meant to be nested inside other "container(-fluid)" classes. Doing so will mess up your layout!
Bootstrap documentation
1.Single-Page Navigation
Notice that each section has an ID (denoted as id="section name"). Rather than linking the href to an external page, you'll link it, instead, to an ID with a hash (#thenameofyoursection).
Change the navigation links in the navigation section of your HTML to target links. For example, replace about.html with #about.
<a href=”#about”>About</a>
<div class=”container” id=”about”>
Scrollspy Navigation
Navigation items automatically highlighted when we reach a different section- created using Bootstrap’s Scrollspy plugin.
Example
Responsive Single Scrolling Navigation Bar
Documentation
When you resize your browser window, your list items should disappear when the browser reaches a breakpoint defined by a Bootstrap media query.
Steps
give our navigation div special Bootstrap nav classes. Underneath the code for your body tag, replace the name of your nav class “nav” with the following classes: navbar navbar-inverse navbar-fixed-top.
create a div with the class container-fluid inside that nav element, indented one level inside your navigation bar, to make the navigation bar stretch across the entire page.
design a responsive navigation bar, we need to make the original unordered list items collapsible when we resize the browser screen. Use the “navbar-collapse collapse” classes for the div. Give the <ul> a class of “nav navbar-nav”.
we don’t want our navigation bar to disappear when we resize the window. We just want another type of navigation bar—a mobile-friendly one. To do this, create a navbar with the class “navbar-header” above your div with the navbar class of “collapse”. Indent properly.
add a button that only appears when the navigation bar is collapsed one level of indentation inside your navbar-header div. This series of spans bearing the Bootstrap class icon-bar creates the common "hamburger" menu—a stacked-bar icon that expands into a full menu on mobile devices.
separate your "Project Name" or "Home" from the rest of your navigation items using Bootstrap and CSS, as well. Add another div class for the name of your project. Replace “projectName” with your portfolio site name or even your own name. Put your project name inside the div with the class navbar-header right under the hamburger button