When anchor links (href) are incorporated within a flex layout and flex-direction is set to row, they may not function as

I've designed a website with three horizontal pages, each filling the entire screen. There's a fixed menu with links that scroll to specific pages when clicked. However, users can also scroll horizontally to navigate between screens.

If two pages are partially visible at the same time (e.g., half of page 2 and half of page 3), the anchor links to those pages won't work; only the link to page 1 is functional in this case. Once all pages are fully visible, the links function properly again.

While this setup works seamlessly in column mode, I suspect it's because anchor links point to the top of sections. In landscape mode, I may need to adjust the display orientation to accommodate side scrolling?

Below you'll find my complete CSS:

body {
    font-size: 0px;
}

h1 {
    font-family: 'Londrina Solid', cursive;
    font-size: 120px;
    text-align: center;
    color: rgba(153, 0, 0, 1);
    text-shadow: -1px -1px #A99E9E;
}

p {
    font-family: 'Titillium Web', sans-serif;
    font-size: 25px;
    color: rgba(255, 255, 255, 1);
    background-color: rgba(153, 0, 0, 0.8);
    text-shadow: 4px 4px 10px #000000;
}

.pad {
    margin-top: 33vh;
    display: flex;
    flex-direction: column;
}

.line1 {
    text-align: center;
    margin-right: 32vw;
    margin-left: 21vw;
    margin-top: 2vh;
    padding-top: 1vh;
    padding-bottom: 2vh;
}

... (CSS code continues)
htmlcssflexbox

Answer №1

Consider implementing a class for displaying pages?

<div class="menu">
 <nav>
   <ul>
     <li><buttom class="pageGo1">page#1</buttom></li>
     <li><buttom class="pageGo2">page#2</buttom></li>
     <li><buttom class="pageGo3">page#3</buttom></li>
   </ul>
 </nav>
</div>
<div class="page page-1">
  page #1
</div>
<div class="page page-2">
  page #2
</div>
<div class="page page-3">
  page #3
</div>


.menu {
  position: fixed;
  z-index: 100;
  left: 0;
  top: 0;
}

.menu li {
  display: inline-block;
  padding-right: 120px;
}

.page {
  position: absolute;
  right: -100%;
  width: 100%;
  height: 100%;
  background: blue;
  padding: 100px;
  box-sizing: border-box;
  transition: 200ms;
}

.page-2 {
  background-color: red;
}

.page-3 {
  background-color: green;
}

.page.active {
  right: 0;
}


$(".pageGo1").click(function () {
    $(".page-1").addClass("active");
});
$(".pageGo2").click(function () {
    $(".page-2").addClass("active");
});
$(".pageGo3").click(function () {
    $(".page-3").addClass("active");
});

For a live demonstration, check out this simple example here

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

Learn the effective way to customize the primary button text color in Bootstrap 4 using SCSS styling

Looking to customize the .btn-primary text color. I attempted to modify the background color in _variables.scss by adding the following line: $primary: #a1c1b6; However, I was unable to change the text color despite trying various options. // not working ...

csstwitter-bootstrapbootstrap-4sass

What is the process to change the URL?

Currently, I am deep into developing a large-scale web application for a company. The project has been ongoing for about four months now, and we have encountered a harmless yet annoying issue that we haven't had time to address. The problem lies in t ...

htmlmodel-view-controllerjspurl

Dynamic HTML gallery that supports the addition of fresh images

Looking to showcase images from a local folder in a slideshow on a simple web page? The page should automatically update when new images are added or removed from the folder. I am not an expert and prefer a minimalist design with perhaps just a transitio ...

jqueryhtmlcssdynamicslideshow

Struggling to create a SVG Line with DOM Manipulation in Typescript

I'm having trouble adding an SVG element to my div using the appendChild function in TypeScript. I want to add a line inside the SVG, but for some reason, I can't see the line output on my browser. There are no errors showing up either. Please he ...

javascripthtmlangulartypescript

Prevent tooltips from displaying outside of an HTML table by using the overflow hidden property for horizontal scrolling

TL;DR: Struggling to position and display tooltips in a table due to the constraints of overflow: hidden. An example has been created to demonstrate the issue with tooltips not displaying correctly within a table. The problem arises because the table nece ...

htmlcsshtml-table

Incorrect measurement of text size

My attempt at creating a basic font size changer was working perfectly until I integrated it with the bootstrap framework. Strangely, when I try to increase the font size, it actually decreases instead. var baseFontSize; (function () { "use strict"; ...

javascriptjquerycss

Angular: How to restrict the compilation of rgba() to #rrggbbaa in your codebase

There are some browsers that do not support #rrggbbaa but do support rgba(). However, in my Angular project, background-color: rgba(58, 58, 58, 0.9) in common.css was compiled to background-color:#3a3a3ae6 in style.[hash].css. How can I prevent this co ...

cssangular

Converting Mat-Raised-Button into an HTML link for PDF in Angular 6 using Material Design Library

Greetings, I have a couple of interrelated inquiries: Upon clicking the code snippet below, why does <a mat-raised-button href="../pdfs/test.pdf"></a> change the URL (refer to image 4) instead of opening test.pdf in a new window? If I have a ...

htmlangulartypescriptangular-material2

The table's pagination displays above, thanks to Tailwindcss

I'm facing an issue where the pagination is showing up above the table, but I was expecting it to be displayed after the table. It would be ideal if the pagination appeared right after the table when adding multiple rows. Check this link for more inf ...

htmlcsstailwind-css

Creating a dropdown menu that seamlessly populates elements without any empty spaces

My team at the company is using a menu created by another developer. I recently added a dropdown selection to the first item on the menu, but I've run into an issue where the dropdown box does not fully fill the item, and I can't seem to fix it. ...

htmlcsswebbulma

What is causing Firefox to display an additional line in this section?

After much effort, I've been attempting to eliminate the extra spacing on this page in Firefox: Do you see the menu? If you compare it to Chrome, you'll notice that the menu is positioned too low beneath the background, giving the layout a broke ...

htmlcsshtml-lists

Allowing several text fields to be paired with multiple checkboxes through a unified jQuery function

I have 4 different checkboxes, each one corresponding to a specific text box. I want to enable the disabled textbox when its corresponding checkbox is checked. Currently, I have written a function for each checkbox in the HTML tag itself using onclick="doc ...

javascriptjqueryhtmlcheckboxdisabled-input

Utilizing Selenium to automate a VBA loop for extracting HTML data directly into an Excel spreadsheet

I recently received help from the Stackoverflow community to scrape data from a webpage. It's an amazing group of people. They provided me with a function that imports data into Excel from a cell containing a URL. However, I'm facing issues becau ...

htmlvbaexcelselenium

Modify only unprocessed text within the HTML content

Consider the following string: html_string = '<span><span class=\"ip\"></span> Do not stare <span class=\"img\"></span> at the monitor continuously </span>\r\n' I am looking to ...

htmlruby

Access another page by clicking on a link within an HTML document

Is it possible to include an anchor tag in demo1.html that, when clicked, will take the user to the demo2.html page and automatically select a data filter on that page? Here is the code snippet for demo1.html: <li> <div><a href="urunli ...

javascripthtml

revealing and concealing information using an accordion-style interface

Looking to enhance my basic jQuery accordion functionality that displays a list. Currently, I aim to hide specific content with a button click and make it visible again when the button is clicked once more. 1) Title 1 2) Title 2 3) Title 3 4) Title 4 &l ...

jqueryhtml

Are HTML tables a viable fix for the problem with ng-repeat?

Let's talk about a fictional dataset that mirrors tabular data found in Excel. function SU(name: String, data: Array<any>) { this.name = name, this.data = data }; function Month(month: String, year: String, goal: Number, projection: ...

htmlangularjshtml-tableangularjs-ng-repeat

Resources for Vue.js stylesheets

Vue.js is my latest discovery and I have been experimenting with the single file component architecture. A small issue I encountered was that all of my components' styles were being loaded on the page, even if they weren't currently active. Is t ...

javascriptcssvue.js

React DOM's offsetHeight prior to rendering

I am struggling to figure out how to position a React DOM element based on its offsetHeight. The issue is that I cannot determine the offsetHeight of an element that hasn't been created yet (so the height cannot be passed as a parameter to the render ...

javascriptcssreactjs

Latest Chrome Update Resolves Fixed Positioning Bug

I am currently facing an issue with setting the second background image in the "Great people providing great service" section to a fixed position. You can view the website here: While the fixed position works in Safari and Firefox, it used to work in Chro ...

htmlcssgoogle-chromepositioning