Anchor links (href) are not working when used in flex layout with flex-direction:row

Question

I have three pages horizontally, each page filling up the entire screen, with a fixed menu having the links that jumps to a specific page. However it is also possible to scroll to the right to get to each screen.

If two pages are visible at the same time (Example: half of page-2 and half of page-3) the anchor links to those pages doesn't work, only the link to page-1 does work. After that all links start working again.

This works perfectly in column mode. I assume this is because anchor links to the top of the section and in landscape mode I would want it to display it from the side?

Below is my entire 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;
}

.line2{

    text-align:center;
    margin-right:19vw;
    margin-left:33vw;
    margin-top:6vh;
    padding-top:2vh;
    padding-bottom: 2vh;
}

.menu{

    position:fixed;
    left:0;
    right:0;
    padding-left:33.33vw;
    padding-right:33.33vw;
    min-height:10vh;
    text-align:center;
    background-color:rgba(42, 37, 240, 0.7);
    display:flex;
    flex-direction:row;
    justify-content: space-around;
}

.menu a{
    font-family: 'Londrina Solid', cursive;
    text-decoration:none;
    font-size:25px;  
    color:rgba(255,255,255,0.9);
    font-weight:bold;
    padding-top:3vh;
    padding-bottom:3vh;
    padding-right:4vw;
    padding-left:4vw;
    text-shadow: 5px 5px 15px #000000;

}

.menu a:hover{
    background-color:rgba(4, 3, 70, 0.5);
}

section:nth-child(1){

    height:100vh;
    width:100vw;
    background-image: url("images/hot-cup.jpg");
    background-size:cover;
    background-position:center;

}

section:nth-child(2){
    height:2vh;
    width:100vw;
    background-color: darkred;
}

section:nth-child(3){

    height:100vh;
    width:100vw;
    background-image: url("images/orange-quarters.jpg");
    background-size:cover;
    background-position:center;
}

section:nth-child(4){
    height:2vh;
    width:100vw;
    background-color: darkred;
}

section:nth-child(5){

    height:100vh;
    width:100vw;
    background-image: url("images/cosy-cafe.jpg");
    background-size:cover;
    background-position:center;
}

article{

    display:flex;
    flex-direction: column;



}




@media screen and (orientation:landscape) and (max-width: 668px) and (max-height: 400px) {

    article{
        flex-direction:row;
        width:304vw;
    }

    h1{
        margin-left:10vw;
        font-size:80px;
    }

    section#border1{
        height:100vh;
        width:2vw;
    }

    section#border2{
        height:100vh;
        width:2vw;
    }

    .menu a{
        font-size:45px;
        padding-top:10vh;
        padding-bottom:10vh;
    }

    .pad{
        margin-top:7vh;
    }

    .line1{
        margin-right:24vw;
        margin-left:25vw;
        font-size:20px
    }
    .line2{
        margin-right:9vw;
        margin-left:39vw;
        font-size:20px
    }

    .menu{
        top:0;
        bottom:0;
        position:fixed;
        left:auto;
        right:auto;

        padding-left:0vw;
        padding-right:0vw;

        flex-direction:column;
        margin-right:30vw;
    }

}

@media(max-width:376px){

    article{
        flex-direction:column;
    }

    h1{
        font-size:55px;
    }

    p{
        font-size:14px;
    }

    .pad{
        margin-top:35vh;
    }

    .line1{
        font-size:18px;
        margin-left:15vw;
    }
    .line2{
        font-size:18px;
        margin-left:26vw;
        margin-right:9vw;
    }

    .menu a{ 
        font-size:25px;
        padding-bottom:2.3vh;
        padding-top:2vh;
        padding-right:0vw;
        padding-left:0vw;
    }

    section#border1{
        height:2vh;
        width:100vw;
    }

    section#border2{
        height:2vh;
        width:100vw;
    }

    .menu{
        top:auto;
        bottom:auto;
        position:fixed;
        left:0;
        right:0;

        padding-left:0vw;
        padding-right:0vw;

        flex-direction:column;

    }
}

Your CSS is not minimal, and the code is not complete because there is no HTML. See [mcve]. — Oriol, Jan 26 '17 at 12:18
I realized using flexbox sometimes makes some elements cover other elements especially the links and particularly when you switch to a mobile phone. Adding margins proved helpful to me. — Alfred Tuva, Dec 19 '20 at 16:23

score 0 · Answer 1 · answered Jan 26 '17 at 12:42

0

Maybe use some class for show 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");
});

Simple example https://jsfiddle.net/8wg6ogss/

answered Jan 26 '17 at 12:42

grinmax

1,835
1
10
13

Not quite the behavior I'm looking for, I uploaded the page below. Set the device to mobile in chrome in developer tools and flip it to landscape to see what I mean. http://hangman-allotments-58721.bitballoon.com/ – ripsraps Jan 26 '17 at 12:59
On PC this works well, look this video https://www.screenmailer.com/v/vAzpOuZVJyZamyA But on mabile works wrong( I will try bug fix... need time – grinmax Jan 26 '17 at 13:51
We have problem in position:fixed for landscape, look this, maybe can help you http://stackoverflow.com/questions/4889601/css-position-fixed-on-ipad-iphone – grinmax Jan 26 '17 at 17:52
thanks for the comment, but that's not quite the issue. It's when you scroll to the right by swiping and show half of each picture at once. If you do so the links for those two pictures stop working (since they are already filling 100 % of the height) – ripsraps Jan 26 '17 at 21:34
and menu moved when i do horizontal scrolling, even was set position: fixed :( maybe you need use JS for solution this bug – grinmax Jan 26 '17 at 22:00

Anchor links (href) are not working when used in flex layout with flex-direction:row

1 Answers1