Repairing a fixed menu bar obstructs items attached to it

I'm currently developing a one-page static website with a fixed menu bar positioned at the top. However, I have encountered an issue where clicking on the links in the menu bar causes the page to scroll down to the linked element and cover it.

Below is a snippet of my HTML and CSS code: Check out this fiddle for more details

nav {
    text-align:center;
    display:inline-block;
    width:70%;
    position:fixed;
       ...
}

I am looking for a solution to make the menu bar behave like a standard navigation bar without covering the linked elements. Any help or advice would be greatly appreciated.

htmlcssfixedmenubar

Answer №1

To ensure proper spacing, consider adding padding-top to the element following the fixed div.

View JSFIddle Demo

By the way, please remember that IDs and classes cannot begin with numbers...

Sample HTML Code:

<div id="menu">
    <nav>
        <p id="menus">
        <a class="menusor" href="#1">1</a>
        |
        <a class="menusor" href="#2">2</a>
        </p>
    </nav>
</div>
<div id="one"> etc...

Sample CSS Styling:

nav {
    text-align:center;
    display:inline-block;
    background-color:#351b0e;
    width:70%;
    font-size:1.2em;
    padding-left:15%;
    padding-right:15%;
    position:fixed;
    top:0%;
    z-index:9999;
    margin-bottom:25%;
}

#one {
    padding-top:70px; /* or any desired value */
}

Answer №2

I encountered a similar issue where I utilized some jQuery.

$('#linkId').click(function(){
    $('html, body').animate({ scrollTop: $('#toMove').offset().top });

});

However, in your scenario with the fixed header, I made some adjustments and have updated the solution here on FIDDLE

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

Steps to correct color gradient on a fixed top navigation bar:

In my Bootstrap 4 project, I have a fixed navbar with a linear gradient background image. The navbar is transparent and fixed, but as I scroll down the page, the gradient disappears. Can anyone help me figure out how to keep the background image visible wh ...

cssbootstrap-4navbartransparentlinear-gradients

Linking HTML files across different directories

Here is the current structure of my folders: de/ index.html en/ index.html hu/ index.html img/ image.png style/ stylesheet.css I am wondering how I can link to the css file in the style folder and the image in the img folder directly ...

htmlcsshyperlinkdirectory

Unable to eliminate the beforeunload event

The code below is used to display a default pop-up when the page is refreshed or closed: var myEvent = window.attachEvent || window.addEventListener; var chkevent = window.attachEvent ? 'onbeforeunload' : 'beforeunload'; /// make IE7, ...

javascriptjqueryhtml

Add some text within the D3 rectangle element

I'm facing an issue and I could really use your assistance! I've been trying various methods to add text into my D3 rect element, but nothing seems to be working. Here is the expected element: https://i.sstatic.net/HSJ0T.png And here is my cur ...

javascripthtmlangulard3.js

Clicking a button in Angular JS to refresh a specific ID element

Just diving into AngularJS for my mobile web app development. I have different id divs for each view, as that's how AngularJS operates with one HTML page. My goal is to use specific javascript for each id page, as they need to retrieve JSON data objec ...

javascripthtmlangularjsonsen-ui

Using Javascript to implement a min-width media query

I'm currently facing an issue with my website () where the media query (min-width) is not effectively removing a JavaScript code within a specific div. The HTML structure in question is as follows: <div id="advertisementslot1"> <script lang ...

javascripthtmlcssmedia

The functionality of the Bootstrap carousel is not functioning properly in the Firefox browser

I attempted to customize the bootstrap carousel in order to create a simple content slider. After reviewing two events in the bootstrap documentation and utilizing animate.css for animation, I found that Chrome and Internet Explorer displayed the animation ...

jquerycsstwitter-bootstrap

Creating universal CSS for all platforms

Seeking assistance in making this Chrome CSS code compatible across different platforms. It currently does not function properly in Firefox and is completely non-functional in IE8. Your help is greatly appreciated, thank you for taking the time to read. . ...

cssgoogle-chrome

Having difficulty resizing the image to fit the container correctly

I am struggling to adjust the size of an image within a container. In my setup, there are two columns - the left column is fixed at 280px and the right column expands to fill the remaining space. The image is placed in the right column, but its dimensions ...

css

Tips for increasing the font size using html and css?

I am encountering an issue with my HTML code: <div class="a"><font size="40"><font color="black">A</font></font></div> No matter what I try, I cannot seem to increase the font-size. Even adjusting the value in the co ...

htmlcsswordpress

Which is the better option: assigning a separate function to each object or binding one function to all objects simultaneously?

I have a loop that dynamically appends links to the element with id #content. I have implemented 2 different ways to achieve this. (1) $.each(array, function(key, value) { $('#content').append('<a href="#">text</a>'); ...

javascriptjqueryhtmlperformanceappend

Creating an Angular form from scratch using HTML

I've developed a component named login. Initially, I created an HTML form called login.component.html and then decided to convert it into an Angular form. To achieve this, I inserted <form #loginform="ngForm"> in the login.component.ht ...

htmlangulartypescript

Is anyone else experiencing issues with getting their Bootstrap collapse button to work?

I'm facing an issue with the collapse-button in my bootstrap navbar not working, and I can't figure out why. Can someone please assist me in resolving this problem? Here is the code for my navbar: <div id="wrapper"> <div class="nav ...

jqueryhtmlcsstwitter-bootstrap

"Encountering difficulties with the Android Webview displaying a particular webpage

I have encountered an issue with my app's Webview when trying to load a specific web page. While other pages load correctly, this particular page appears blank after loading. The source code of the HTML page is generated through a CGI script and the ...

androidhtmlwebview

CSS3 columns causing <li>s to be cropped

I'm attempting to implement css3 columns with a list (<li>), but I'm running into some issues getting it to function properly. I have wrapped the <ul> in a div like this: .ul-container { -moz-column-width: 310px; -moz-column-gap ...

htmlcssmultiple-columns

Discover the process of incorporating secondary links into your dabeng organizational chart!

I need to incorporate dotted lines on this chart, such as connecting leaf level nodes with middle level nodes. import OrgChart from '../js/orgchart.min.js'; document.addEventListener('DOMContentLoaded', function () { Mock.mock(&apo ...

javascriptjquerycssorgchart

jQuery can elegantly slide text to the center from the left while smoothly sliding it from the center to the right

Is there a way for me to make the text "hello" slide from the center to the right and fade out, while at the same time make the text "there" slide from the left to the center and fade in when I click a button? I'm struggling to achieve this without pl ...

javascriptjqueryhtmlsliding

Preventing link color changes in HTML generated by Python

I am currently developing an HTML page using Python. The issue I am facing is that when the page is created with links, clicking on a link permanently changes its color. Disabling this behavior in HTML has not been successful when creating the page with Py ...

pythonhtml

Having difficulty retrieving a nested child element with querySelector in JavaScript

Encountering an issue with the querySelector method in JavaScript when accessing nested child elements. The goal is to retrieve the first child of a selected element and then obtain the first child of that inner element. Attempted code: let selected = doc ...

javascripthtmldom

Is there a way to deactivate the <script> tag using CSS specifically for media queries?

When designing a website exclusively for desktop usage, I encountered the issue of it not being viewable on mobile devices. I attempted to address this problem by utilizing the code below: script { display: none; pointer-events: none; } Unfortunat ...

javascripthtmlcss