Looking to add a fixed menu to my website that stays at the top even when scrolling down the page.
For an example, check out iplex.co.in for a demonstration.
Looking to add a fixed menu to my website that stays at the top even when scrolling down the page.
For an example, check out iplex.co.in for a demonstration.
To adjust the positioning of an element in relation to the browser window, you can use position:fixed.
HTML:
<div id="main">
<div id="menu">
<ul>
<li><a href="#">Menu1</a></li>
<li><a href="#">Menu2</a></li>
<li><a href="#">Menu3</a></li>
<li><a href="#">Menu4</a></li>
</ul>
</div>
</div>
CSS:
#main
{
height:1200px;
width:auto;
border:1px solid Red;
}
#menu
{
height:50px;
width:auto;
background-color:#DDD;
position:fixed;
top:20px;
left:60px;
}
#menu ul li
{
display:inline;
float:left;
margin:5px 10px;
}
One method is to use the <div> element with the CSS property position: fixed
#navigationMenu {
position: fixed;
margin-left: 1086px;
z-index: 10000;
}
If you want to ensure that an element remains fixed on the page, use position: fixed.
Example HTML:
<ul id=menu>
<li><a href="#L384">Section 1</a>
<li><a href="#details">Section 2</a>
<li><a href="#FAQ">Section 3</a>
</ul>
Corresponding CSS:
#menu {
position: fixed;
right: 0;
top: 50%;
width: 8em;
margin-top: -2.5em;
}
To see a specific example of this in action, visit: http://www.w3.org/Style/Examples/007/menus.en.html
Apply the position:fixed; style rule to your navigation identifier.
I am facing an issue with displaying certain checkbox values from the controller. In order to properly save these values, I believe it would be best to declare them in the controller and then use them in the HTML. However, my current code is not successful ...
How can I prevent the menu from covering the input box in Vuetify version 2.3.18? I came across a potential solution here, but it didn't work for me: https://codepen.io/jrast/pen/NwMaZE?editors=1010 I also found an issue on the Vuetify github page t ...
I'm working on a HTML/CSS table and I want the header row to have a specific background color. Below is my code: <table class="contentTable"> <tr class="contentTableHeader"> <th>No.< ...
I'm having some trouble with my website development in HTML5 and CSS3. Specifically, I am struggling to get my processing sketch to work on browsers other than Firefox. Below is the code I am working with: <!DOCTYPE html> <html> ...
In the server.js file, I have the following code: TABLE .findAll({ raw: true }) .then(function(asd) { console.log(asd); }); This code displays all data from my database in the console. Now, my question is: how can I display this data on my website? ...
Currently, I have developed a non-commercial web application using basic HTML, PHP, and Javascript along with Dynamic Drive's Tab Content code. This app serves as a tool for managing the books in my home library as well as on my ereader. My main goal ...
Despite using the same color for the outer border and inner borders, I am having trouble getting the inner borders to show up. Can anyone provide guidance on how to display both the inside and outside borders? Note: I have attempted changing the color, bu ...
Hey there, I'm completely new to the world of HTML/CSS and this is my first project ever. I welcome any constructive criticism that can help me improve in the future. Now onto my current dilemma: I've decided to use Bootstrap because it seems u ...
I recently created a navigation bar using some online tutorials, and everything seems to be working fine except for the drop-down menu. I've been struggling with it for hours and can't seem to find a solution. Any help would be greatly appreciate ...
Can anyone assist me? I'm having trouble with the res.json() function in my code. It seems to work after the first request, but not after the second. Right now, my application is quite simple - it scrapes user data from social media platforms like Twi ...
I need to create a draggable toolbar on my mobile webapp that can reveal content beneath it. I want to achieve this using just HTML/CSS, without relying on touch/scroll events or libraries. To do this, I'm overlaying a scrolling element on top of the ...
Apologies if the topic seems puzzling, I couldn't find a better way to explain it. I utilized jQuery to adjust the height of a div to match the size of the viewport. var slidevh = function() { var bheight = $(window).height(); $(".container" ...
After scouring numerous sources on the web, I have found various tips for centering a div. However, no matter what I try, there seems to be a persistent white space to the left of my div that I just can't seem to resolve. If you're curious, her ...
<nav class="navbar navbar-default"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" d ...
I am seeking a solution to animate the color and size of a div box, then return it to its original state when a button is clicked. Here is an example of my code: document.getElementById("andAction").addEventListener("click", function() { document.getE ...
I've encountered an issue with a checkbox I created to display a + and - for expand and collapse functionality. HTML Code: <input type=checkbox class="ins" ng-model=show ng-class='{open:show}'><b>Show</b> CSS code: .ins ...
I'm attempting to create a feature where the visibility of a password field is determined by the value of another input element. For instance, when the username is set to "admin", the password field should be hidden. If any other value is entered in ...
Currently, I am working on creating a progress ring using SVG and CSS. It is functioning well in Chrome; however, Firefox (61.0.1 (64-bit)) is giving me trouble as it does not display the circle. I attempted to apply the method from this question but did n ...
I'm attempting to integrate code from a website into my project, but encountered an error when the particles failed to run after adding it. I downloaded and installed particle.js from "https://github.com/marcbruederlin/particles.js/issues" for this pu ...
On my registration form, users have the option to select an avatar from 2 choices: Select a default avatar Upload their own custom avatar This is how I have implemented it in my HTML page. <img id="preview" src="img/default_1.png"> The chosen av ...