Using JavaScript to replace static placement

I'm looking to implement a floating navbar on my website, the kind that scrolls down with you and stays at the top of the window.

However, I've run into an issue with certain Android versions (like 4.3) when using the fixed position. My navbar won't stretch to 100% width and instead leaves a small space on the left (almost like a 95% width that floats right).

This is the CSS for my navbar:

#navBar
{
    position: fixed;
    top: 0px;
    width: 100%;
    height: 75px;
    background-color: #ffffff;
    box-shadow: 0px 0px 6px #666666;
    z-index: 1;
}

Additionally, I've included this in my HTML file:

<meta name="viewport" content="width=100%; initial-scale=1; maximum-scale=1; minimum-scale=1; user-scalable=no;" />

I've also attempted to adjust the width using JavaScript:

var documentWidth = $(window).innerWidth();
$('#navBar').width(documentWidth);

Is there a way to address this issue using JavaScript without relying on position fixed? Or do you have any other suggestions?

androidjquerycssfixednavbar

Answer №1

To enhance your website's appearance, consider updating your CSS code as follows:

#navBar
{
    position: fixed;
    top: 0px;
    left:0px;
    display:block;
    width: 100%;
    height: 75px;
    background-color: #ffffff;
    box-shadow: 0px 0px 6px #666666;
    z-index: 1;
}

If you encounter issues with the above code, you can try an alternative approach using jQuery:

CSS:

#navBar
{
    position:absolute;
    top: 0px;
    left:0px;
    display:block;
    width: 100%;
    height: 75px;
    background-color: #ffffff;
    box-shadow: 0px 0px 6px #666666;
    z-index: 1;
}

jQuery:

$(window).scroll(function(){
    $('#navBar').css({'top':$(window).scrollTop(),'left':$(window).scrollLeft()});
});

For a practical example, refer to this fiddle:

http://jsfiddle.net/p44JW/

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

Is it possible for me to introduce an additional variable to the String.prototype object?

I have a question that has been bugging me out of curiosity. I was thinking about whether I can add an additional variable in front of String.prototype. For instance: $.String.prototype.functionName = function(){}; Obviously, this doesn't work as i ...

javascriptjqueryprototype

Icons positioned centrally while floating to the left

There seems to be an issue with centering the icon CSS: .icons .overview { position: relative; float: left; width: 16.6666666667%; text-align: center; overflow: visible; } .icon { display: inline-block; width: 64px; heigh ...

htmlcssweb

Utilizing Bootstrap for aligning a span element beneath a div container

I'm working on enhancing a project by integrating more Bootstrap elements. In one part, I have a circular div with the text "Go to Homepage" below it. My goal is to center the span under the div and have it appear on a single line. How can I achieve t ...

htmlcsstwitter-bootstrappositionmargin

What is the best way to retrieve the non-final variable "number" from within an inner class in Java?

As a beginner in Java programming, I am facing an issue where I cannot access variables outside of a function. Even after attempting to change the variable to final, I encountered an error message: The final local variable number cannot be assigned, sin ...

javaandroid

Struggling to get my JavaScript function for calculating one rep max to work, need some help figuring out the issue

I have been working on a one rep max calculator using the Epley Formula. However, when I try to call the function, it returns as undefined. I have utilized the parameters weight and reps, both of which are parsed as integers, believing that they would be e ...

javascriptjqueryjsfiddle

Is there an efficient method for matching "data-" attributes with property names in mixed case?

In my custom jQuery plugins, I utilize a base plugin class that goes beyond what the jQuery UI widget offers by handling more complex tasks. Currently, I am looking to extract values from data- attributes attached to elements and incorporate them as optio ...

javascriptjqueryjquery-pluginscustom-data-attribute

Choose the value of the adjacent text input with jQuery

I am working with dynamic checkboxes and corresponding text inputs. My goal is to alert the value of the text input when a checkbox is checked. However, I am having trouble retrieving the correct value of the text input associated with each checkbox. Addit ...

jqueryhtmldom

Eliminate the standard blue border that appears when control-clicking on table elements

I've encountered this question before, but unfortunately none of the solutions provided have worked for me. Some things I've attempted are: Using event.preventDefault() - did not produce the desired result. Removing user-select from CS ...

javascripthtmlcss

What is the process of transforming a jQuery load method into native JavaScript, without using any additional libraries?

Recently, I successfully implemented this ajax functionality using jQuery: $(function(){ $('#post-list a').click(function(e){ var url = $(this).attr('href'); $('#ajax-div').load(url+ " #post"); e.preventDefaul ...

javascriptjqueryajax

Simple datetime selection feature in Django

I am looking to implement multiple datepickers in various pages on my website. I followed the instructions provided in this helpful guide for Fengyuan Chen’s Datepicker (the last link mentioned): When I create a standalone HTML page using the provided c ...

pythonjquerydjango

Issue with text-nowrap not functioning as intended within Bootstrap 4.5 table cells

Is there a way to eliminate the space between two columns in my layout? I want to get rid of the highlighted space below. I attempted using text-nowrap, but it didn't achieve the desired result. <link href="https://stackpath.bootstrapcdn.co ...

csstwitter-bootstrapbootstrap-4html-tablenowrap

I'm noticing that when I refresh the page, my inputs seem to disappear from the page, yet I can see that they are saved in the console's local

If anyone can help me with this issue I'm facing, I would greatly appreciate it. My aim is to retain values in the text box along with local storage even after refreshing the page. Here is an example of the code I am working with: Link to my web appl ...

javascripthtmljquerycss

Leveraging multiple ">" CSS selectors

Here is the HTML code to style: <table id="my-table"> <tr> <td> I would like to customize this </td> <td> <table> <tr> <td> Not looking to customize t ...

htmlcss

Utilizing Backbone.js: Passing a variable from a route to a view, collection, or model

Currently working on a mobile website project where I have set up a directory named 'api' containing PHP files that retrieve JSON formatted data from a remote API to avoid cross-domain issues. However, one of the PHP files requires a GET paramet ...

javascriptphpjqueryjsonbackbone.js

Problem with sortable columns in DataTables

$(document).ready(function () { var dt = $('#example').DataTable({ "processing": true, "serverSide": true, "ajax": "api.php?t=clients", "columns": [{ "className": "details-control", ...

javascriptphpjquerydatatable

css side by side with immovable element

Seeking assistance with CSS. I am looking to create a layout as follows: I want a center-fixed menu with a width of 960px - this part is straightforward. Alongside the menu, I aim to have two divs: one spanning from the left edge of the screen to the cl ...

css

Difficulty with AngularJs Translation Partials

I have encountered an issue with binding translation. Some objects are converting to their translated value successfully, while others, as mentioned below, are not working. This problem only occurs the first time I build the project. Upon refreshing, every ...

javascriptjqueryhtmlangularjstranslation

Simply interested in extracting the JSON Class specifically, not all of the data

Looking for a way to extract only text from a specific class using $.getJSON and YQL. Currently, it retrieves all data and removes tags. Is there a method to achieve this? function filterData(data){ // remove unwanted elements // no body tags ...

javascriptjqueryjsonajaxyql

Ways to create intersecting borders at the corners of a division

Is there a technique to expand the borders of a div by 1 or 2 pixels in each direction so that they create a cross at each corner? https://i.stack.imgur.com/mUAxM.png ...

css

Update the second selection when the first selection is changed

Apologies for not including "my attempt" here, I struggle with jquery and need some guidance!! I want to modify the value of a second selector based on the outcome of the first. In my database, I have a list of builders and regions under the headings bui ...

phpjquerymysqlselect