Problem with the position of Bootstrap 3.3.4 navigation bar

Check out the Markup:

<div class="navbar navbar-inverse navbar-static-top">
        <div class="container">
            <a href="index.html" class="navbar-brand">Kellumonline</a>
            <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <div class="collapse navbar-collapse navHeaderCollapse">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="index.html">Home</li>
                    <li><a href="tech/index.html">Tech</li>
                    <li><a href="gaming/index.html">Gaming</a></li>
                    <li><a href="skate/index.html">Skate</a></li>
                    <li><a href="contact/index.html">Contact</a></li>
                </ul>
            </div>
        </div>
</div>

Visit this website to see where this code is currently live.

I have kept my CSS styling simple with just a few styles applied:

  • one for using a Google font,
  • another for setting dimensions of my jumbotron,
  • and the last one for adjusting the margins on three columns at the bottom of my home page.

Currently, I am having issues with spacing on my navbar links and display problems on my contact page even though it uses the same code as other pages.

If anyone can offer help, feedback, or constructive criticism, I would greatly appreciate it!

Thank you.

Answer №1

That is really dumb...

The navigation bar on your contact page is using the following class:

class="navbar navbar-incerse navbar-static"

Therefore,

Please update incerse to inverse

Answer №2

Upon closer inspection, it appears that the Home link and Tech link are missing their closing </a> tags. By adding those in, the issue should be resolved.

In addition, @yenne-info has provided the accurate solution for the Contact page problem.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

initiate changes to the application's style from a component nested within the app

I'm looking to update the background color of the entire page, including the app-nav-bar, when I'm inside a child component. When I navigate away from that component, I want the default style to be restored. Any suggestions on how to achieve this ...

I'm currently attempting to determine the total cost of a series of operations, however, I am not receiving any results

Here is the code snippet from my HTML file: <tr> <td><input id="z1" type="number" oninput="calculateSubTotal()"> </td> <td>Shirts - WASH - Qty 1 to 4</td> <td>2.50 ea</td> ...

"Encountered an HTTP 400 error when trying to retrieve content from a Persian URL using file

As a beginner, I am facing an issue with a URL that contains Persian language characters. For instance: http://tabnak.ir/fa/news/577155/ویدیوی-درگیری-نیروهای-سیا-و-پنتاگون-در-سوریه-با-همدیگر-ویدیوهایی ...

Material UI Paper component does not extend to full viewport height

My React component includes a Material UI <Paper> component that acts as a background. This <Paper> is nested inside a <ThemeProvider>, which in turn is nested within a <div>, and then further nested inside the <body>. I have ...

Make your CSS and JS files smaller by using a PHP compression script in your WordPress child theme

  I am looking to implement a PHP script that will serve combined, pre-gzipped, and minified JS and CSS files. You can find the source code for this script here: https://code.google.com/p/compress/ I have a WAMP localhost with WordPress install ...

Delete a designated section from a URL with the power of jQuery

I have a URL like http://myurleg.com/ar/Message.html and I need to change ar to en in it when clicked on. For example, if my current URL is: http://myurleg.com/ar/Message.html After clicking, it should become: http://myurleg.com/en/Message.html I attemp ...

Having trouble with adding the copy to clipboard feature

I'm having trouble implementing a copy to clipboard option on my color selector. The goal is to display the selected color on an h3 tag and create a background color generator. Each time a color is chosen, it should appear on screen for us to easily c ...

The Media Queries in the Wordpress html5blank theme are failing to function properly

While using the html5blank theme to develop a WordPress site, I noticed that my media queries are functioning properly locally. However, when I add them to the WordPress style.css file, they seem to stop working. Even after stripping away all other media q ...

Can a collapse that was saved in a separate file be displayed on the requested page?

Imagine having a navigation bar on your website's index page with four buttons, each leading to a different page. What if you wanted to bring all those separate pages together into one by using collapsible elements? That's the challenge this user ...

Encountering a 404 error in Flask when using a '?' in a redirect

After configuring a payment service on my Flask web app, I encountered an issue where the successful payment processing redirected me to a specific URL. However, upon reaching the URL, I received an error code 404. Strangely, when I removed the "?" from th ...

What is the process for reinserting a list item into the nested elements?

Looking for help with manipulating a menu in HTML? I have a menu that I want to modify by removing and adding list items. While I've had success removing items, I'm struggling to properly use the add method. Here's an example of what my menu ...

Tips on pausing a moving image from left to right and restarting it later

Is there a way to pause the left to right moving image at the end and then restart the loop? I tried utilizing this website link for assistance: https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_animation-delay Unfortunately, I couldn't fi ...

Preventing Click Events from Firing During Drag in JavaScript

I have implemented a code for dragging containers left or right, which is functioning properly. Users can also click on the "thumb". However, I am facing an issue where a click event occurs even after dragging. I want to ensure that only either drag or cli ...

How to position an absolute element beneath a fixed element

My website is experiencing a problem where the fixed header is overlapping an absolute paragraph on this page. Does anyone know how to resolve this issue? ...

Initiate the countdown when the button is pushed

Recently ran into an issue where a button triggers a command to a Perl script, causing the page to continuously load for 60 seconds. To provide users with transparency on when the Perl script will be finished running, I implemented a JavaScript countdown t ...

Failure of Styling Inheritance in Angular 2 Child Components from Parent Components

My Parent Component utilizes a Child Component. I have defined the necessary styles in the Parent CSS file, and these styles change appropriately when hovering over the div. However, the Child Component does not inherit the styling classes of the Parent Co ...

Maintain the expanded sub-menu when the mouse leaves the area, but a sub-option has been

Implementing a side menu with parent and child options that dynamically display content in the main div on the right when a child option is selected. The parent options are initially shown upon page load, and the child options appear when the mouse hovers ...

Exploring the depths of Django Forms: Uncovering additional model information for ModelChoiceField

I am currently working with 3 models that are interconnected. A 'showing' contains foreign keys 'film' and 'screen' which link to the Film and Screen models. My goal is to create a webpage where users can view information abou ...

Discover the technique for choosing an element within an IF statement using the keyword (this)

I am currently implementing bootstrap validation in my project. Here is the JavaScript code I am using: My goal is to achieve the following: $("#create-form").submit(function(e) { if ($("input").val() = "") { $(this).addClass("is-invalid"); ...

Is it possible to confine CSS keyframe animations within a specific scope?

Is it feasible to limit keyframe animations to a specific scope defined by classnames? This could make it easier to reuse the same animation names without any conflicts. I couldn't locate any information on this topic. If restricting keyframe animati ...