I am facing an issue where my fixed navbar code breaks up into individual boxes for the links when I try to scroll, covering the page title. How can I resolve this? My code is too long to post directly here, so it's available on pastebin at the following link:
To solve the issue, I recommend adjusting the padding-top of the body element. Since the navigation block is fixed in its position, it does not physically obstruct any content on the page.
Given that you are utilizing jQuery, we can leverage its capabilities:
<script type="text/javascript">
$(document).ready(function() {
var navHeight = $('#nav').height();
$('body').css("padding-top", navHeight);
});
</script>
By dynamically setting the padding-top of the body based on the height of the navigation bar after the page has loaded, your content will seamlessly flow beneath it even if the menu items span multiple rows.
In order for this solution to function effectively, it is important to remove any fixed heights set in the following CSS rules:
#nav, .fixed-nav-bar {
height: auto;
}
Allowing the elements to adjust their heights automatically will ensure smooth functionality.
Begin by correcting your code.
You mistakenly placed h1 and nav within the head tag when they should be located inside the body tag instead.
Check this guide to see which elements belong in the head tag: http://www.w3schools.com/tags/tag_head.asp
After moving that code into the body, refer to bootstrap documentation for a premade class for a fixed navbar before creating your own.
I recommend placing the h1 title below the navbar, not above as it currently is, for better visual layout consistency.
As per the bootstrap guidelines for a fixed top navbar, make sure to add padding-top to your body if using .navbar-fixed-top.
Since you've increased the height of the navbar from the default 50px, adjust the padding-top accordingly.
Furthermore, your links appear like this:
<li><a href="What Are Drones.html">What Are Drones</a></li>
In most cases, links won't work with spaces in the file name, so remove them in HTML files.
For example:
<li><a href="what-are-drones.html">What Are Drones</a></li>
Experience seamless functionality with this code.
Happy Coding :-)
@charset "utf-8";
/* CSS Document */
#TITLE {color: #1762a1; font-family: "Cuprum", sans-serif; font-size:80px;}
.navbar-nav li a{color: white ! important; font-family: "Cuprum", sans-serif; }
.navbar-brand{color: white ! important;}
BODY{PADDING-TOP: 50px;}<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Drones</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">
<link href='https://fonts.googleapis.com/css?family=Cuprum:400,700,400italic,700italic' rel='stylesheet' type='text/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>
<script src="btt index.js"></script>
<link rel="stylesheet" href="indexCSS.css" />
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Kittatinny's Drone Information</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="index.html">Home</a></li>
<li><a href="What Are Drones.html">What Are Drones</a></li>
<li><a href="How Drones Work.html">How Drones Work</a></li>
<li><a href="Buying a Drone.html">Buying a Drone</a></li>
<li><a href="About Us.html">About Us</a></li>
</ul>
</div>
</div>
</nav>
<h1 id="TITLE" class="text-center"> Kittatinny's Drone Information</h1>
</head>I came across this stunning ring with a captivating smoke animation, but I am struggling to comprehend its design fully. My goal is to resize the ring to about 80px and maintain only a single color throughout. However, my attempts to simply reduce the siz ...
Hello everyone, I'm a newbie to JS and struggling with my code. It seems like everything should work, but it just won't. The issue seems to be with the phone number form validation. I've written code that, in theory, should do the job, but ...
I currently have a homepage featuring a fadeslideshow with 5 slides. The fadeslideshow plugin being used can be found at http://plugins.jquery.com/project/fadeslideshow. On the homepage, there is also a menu bar with various menu items. When a user clicks ...
I have encountered an issue with a component I created that only displays the value of block[0], rather than showing the entire block value. For instance, if I input: HI Stackoverflow It only shows "HI" and not the complete content of the field. Is th ...
My challenge involves a textarea that dynamically expands as content is added to it. The structure of the textarea within a div element is illustrated below: <div id='sendMes' class='container-fluid'> <form action='#&apos ...
When navigating the website, I found that I needed to choose a specific time duration from a drop-down menu, as shown in the image. My goal is to automate this process using a Python script. I already have a script in place, but it requires an additional c ...
In my application, I have a MySQL table called 'company' which includes columns such as companyid and activation_code. I am displaying the values from this table in an HTML table on a page named comapproval.php. Each row in the HTML table contain ...
Issue I am facing a challenge with two DataTables — one with five columns and the other with four columns. My goal is to find a solution for hiding certain columns based on specific screen widths. Approaches I've Tested While resizing the browser ...
I'm currently using Angular CLI and I have a menu list that I want to customize. Specifically, I want to change the background color of the <li> element when it is clicked. I am passing an id to the changeColor() function, but unfortunately, I a ...
Can someone help me achieve borders like the ones in this image? https://i.sstatic.net/qZHbK.png I tried using the after pseudo-element as shown below, but after learning from this discussion: Why can't an element with a z-index value cover its child ...
Attempting to create an H page layout: body { background-color: grey; background-size: 100%; background-repeat: no-repeat; } html, body { height: 100%; margin: 0px; } .a { float: left; width: 25%; height: 100%; border: 1px solid blue ...
I have created a unique jsfiddle with 20 boxes that I am trying to animate using the Animate.css plugin. The plugin can be found at daneden.me/animate. My goal is to animate each box one after the other in a sequential manner, but I seem to be having trou ...
I'm in the process of developing a shopping cart. I start by adding products to the cart, then use Ajax to dynamically update the quantity when it changes. Everything works smoothly after the first change, but subsequent quantity updates do not refres ...
My friend and I are beginners in the world of programming, with a solid grasp of html, CSS, and JavaScript. We're currently collaborating on a small project where we aim to create a chat system. While researching resources for our project, we came acr ...
I currently have a Wordpress website with WooCommerce and several variable products. Each product's variation has a dropdown menu that displays different options when clicked. My main concern is how to customize the appearance of these dropdown menus ...
I'm having trouble switching between a CSS column layout and a normal layout for a div element with the ID 'article'. The jQuery script I wrote doesn't seem to work properly, as the entire thing disappears. Can anyone advise me on how t ...
After integrating react-bootstrap with nextjs, I encountered a strange issue with the NavBar component. The problem arises when I first load the navbar - everything appears as expected, https://i.stack.imgur.com/R9guE.png but upon refreshing the page, CS ...
<div id="CollectionALL"> <div id="collection1" class="col"> <img id="Img1" class="imageCS"/> <H1 id="Title1"></H1> ...
Referencing a previous question on Stack Overflow, the goal is to track user clicks in a Firefox browser using JavaScript. The provided JavaScript code almost achieves this: var DocElements = document.getElementsByTagName('*');for(var i = 0; i & ...
I have utilized flexbox to rearrange the boxes. Here is a link to the demo code My issue arises when resizing for smaller screens; I need to place B between A and C. https://i.stack.imgur.com/M0dpZ.png Any suggestions on achieving this goal? Thank you i ...