I wonder where this design is originating from

After exploring several of the suggested questions that appeared while typing, I was unable to find a solution to my issue.

Currently, I am utilizing Uikit V2 and I have implemented a div with the Sticky component as shown below:

    <div class="uk-sticky" data-uk-sticky id="nvbr">
                <nav class="uk-navbar-center">
                    <a class="uk-button" href="#pg5"><h3>Contact</h3></a>
                    <a class="uk-button" href="#pg6"><h3>AboutUs</h3></a>
                    <a class="uk-button" href="#pg3"<h3>Services</h3></a>
                </nav>
            </div>

While this setup performs well on a full screen, I encounter a problem when resizing to a smaller screen as the bar becomes excessively wide. Upon inspecting the element in Chrome, I noticed the following line:

    <div class="uk-sticky-placeholder" style="height: 123px; margin:0px;">

I am curious to know where this line is located in my code and how I can rectify this issue. I have sifted through both Uikit and Uikit.js for a solution.

(It's worth mentioning that when I adjust the height from 123px to 10px in the Inspector, the layout appears as desired.)

Thank you in advance for any assistance provided.

javascripthtmlcssgetuikit

Answer №1

It appears that the height calculation is based on elements that are collapsed within the viewport.

For more information, you can visit the following link: https://github.com/uikit/uikit/blob/v2/develop/src/js/components/sticky.js#L286

If I were in your position, I would consider hiding navbar elements on smaller devices using conditional classes and setting up a canvas menu. You can find more details in the documentation.

Alternatively, you could also try implementing a custom JavaScript solution to take control over the situation.

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

Having trouble showing the image stored in the database on the webpage

I'm having trouble displaying my full image on my webpage from the database. Here is my code snippet: $con= mysqli_connect("localhost", "root", "", "project"); if(!$con) { die('not connected'); } ...

phpcssdatabase

Struggling to generate package using manifoldjs

Excited to dive into the new tool called ManifoldJS introduced by Microsoft at Build 2015, I'm facing some challenges. My website is up and running as a basic HTML- and JS-based app using Angular and TypeScript. I've even created a manifest.json ...

javascriptnpm

Having issues transferring values from one page to another. Any suggestions to make it work correctly?

I currently have two pages within my website, one is called details.page and the other is maps.page. In the details page, I have set up a search input as shown below : <form method="get" id="form-search" data-ajax="true" action="maps.page"> ...

javascriptjqueryhtmlajax

Save geometric shapes data in the SQLite database

How do I go about storing polygon data in an SQLite database? Important: I am utilizing the Cordova plugin. polygon: Point[]; interface Point { x: number; y: number; } https://i.sstatic.net/5EYf2.png ...

javascripttypescriptsqliteionic3cordova-plugins

Mastering React hooks: A guide to effectively updating and rendering elements

Each time I click the delete button, it seems to only remove the last element instead of the specific one based on index. Is there a better way to achieve this without changing from <input defaultValue={name} /> to <input value={name} /> in t ...

javascriptreactjs

A step-by-step guide on storing JSON data into a variable using NodeJS

Just starting out with Node.js and running into an issue. I need to figure out how to extract and save data from a JSON object retrieved from the GitHub API. var http = require("http"); var express = require('express'); var app = express(); var ...

javascriptnode.jsexpress

Tips for incorporating personalized CSS properties, such as font-size, into all Django admin pages

Currently, I am in the process of developing a project using Django. My goal is to implement custom CSS properties, such as font-size, across all Django admin pages - including User change and User add pages - simultaneously. This would streamline the proc ...

cssdjango

What causes the lack of impact on lambda rendering speed despite integrating webpack?

Hey there, I've been working on implementing webpack for a project that involves microservices, Node.js, TypeScript, AWS, and AWS SAM. My main objectives are: Reduce the cold start time of lambda functions. Minimize security vulnerabilities by e ...

javascriptnode.jstypescriptamazon-web-serviceswebpack

Issues with applying styles to custom components in styled-components

I attempted to customize the inner elements of react-id-swiper using the code below: import Swiper from 'react-id-swiper'; import styled from 'styled-components'; const MySwiper = ({ className, children }) => ( <Swip ...

javascriptreactjsmaterial-uistyled-components

Encountering an issue with the default task in gulp, an error is displayed in Gitbash stating: "Task must have a name that is a string

Upon running the command 'gulp' in gitbash, an error is being displayed for the last line of the code, stating: throw new Error('Task requires a name that is a string'); Error: Task requires a name that is a string "use strict"; var g ...

javascriptnpmgulpgit-bash

Ways to style text using variables in SASS without using quotation marks

When working in SASS, I have created the following mixin: @mixin background_gradient($dir, $from, $to) { background: linear-gradient('to #{$dir}', $from, $to); // for IE10 } However, when viewing it in the browser, the output appears as: b ...

htmlcsssass

Is there a way to position headline text behind another headline? Take a look at the image provided for reference

I need help creating headline text with a background image similar to the example below. I tried using relative positioning on the first heading, but I can't seem to get it to work correctly. If anyone can provide me with the code to achieve this ef ...

htmlcss

Tips for refreshing the tawk.to widget when the language changes with the help of i18next

Utilizing i18n-jquery for language switching and integrating the tawk.to chat widget, I've successfully loaded different languages on page reload. However, due to i18n not refreshing the page (which I don't want to do), I need to figure out how t ...

javascriptjquerytranslationi18nexttawk.to

CSS Vertical Accordion Menu

I am struggling to modify the vertical accordion menu CSS. I am having difficulty adjusting the sub-menu list items. <div id="menuleft"> <div class="top">header</div> <ul> <li><a href="#">Main 1</a> ...

jquerycssmenusubmenu

Issue with specific route causing server to throw 500 error

Recently, I have been working on a small school project that involves creating our own API and connecting it to an Angular front end. While following some tutorials, I encountered an issue where my application started throwing internal server error 500 af ...

javascriptnode.jsexpress

The website is showing up blank when accessed on mobile devices

One of the websites we recently worked on used to appear correctly on iPhone and Blackberry, but now it shows up as blank on both devices. Interestingly, the site still displays as usual on iPad even though we never created a specific mobile version for ...

htmlcssiosmobile

"Exploring the MUI Data Grid: A Step-by-Step Guide to Adding a Summary Row

Need help with adding a summary row to my Data Table from MUI. You can find the documentation here or visit the main website here. I have tried to implement the summary row but I am facing some challenges. Any suggestions or ideas would be highly apprecia ...

javascriptreactjsmui-datatable

Assigning a class to an li element once the page has finished loading

I am facing an issue with my navigation bar where the links are dynamically loaded from a database using a foreach loop. Although the nav bar is static, I want to apply an 'Active' class to the link when it is currently active. Despite trying to ...

javascriptphpjqueryhtml

Tips for developing a versatile code for passport.authenticate

I have a scenario where multiple controllers contain various methods that require user authentication to access database data. I am currently attempting to streamline the authentication process to avoid repetition in my code. Within the controller: const ...

javascriptnode.jspassport.js

Can the document.ready function and a button click function be merged together effectively?

I am working on a tavern name generator that generates names when the document loads and also when a button is clicked. Is it possible to combine the document.ready function with the button click function like this: $(document).ready(function(){ ...

javascriptjquerybuttondocument-ready