1

So I'm trying to learn HTML and CSS for now, and not getting yet into jvS. I'm trying to create a responsive design, and I understand media queries somehow.

Basically, I have a screen-size width nav bar on the desktop with a logo in it. When I get to phone sizes, I want that logo to move on the right bottom corner of the screen and be sticky there.

Do you know that + sign on Twitter when you want to post? I want to do something like that. BUT I want to know if I can just move the element I already created for the navbar, or do I need a completely new element?

This is in HTML

header {
    background-color: chartreuse;
    margin: 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1px 20px;
}
<header>
    <img class="logo" src="/Assets/Logo.png" alt="logo">
    <nav>
        <ul class = "links">
            <li><a href="#">Home</a></li>
            <li><a href="#">Recipes</a></li>
            <li><a href="#">About</a></li>
        </ul>
    </nav>
    <a class="cta" href="#"><button>Youtube</button> </a>
</header>

And I basically need that logo to move on the right bottom of the screen on screen sizes smaller than 500px. I can't find any answers, so if you have any suggestions please help me!

Minal Chauhan
  • 6,025
  • 8
  • 21
  • 41
zippo
  • 11
  • 1
  • 2
  • Read about [media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries) – vsync Dec 14 '21 at 09:57

3 Answers3

0

You can achieve this by utilizing position: fixed. This rule assigns fixed positioning on an element, which in other words means no matter how horizontally or vertically big is your page, the element will stay in the same place.

poistion: fixed works almost the same way as position: absolute. You specify the element's positioning, according to the parent relative element. This is the css you're looking for:

@media screen and (max-width: 499px) {
  .logo {
    position: fixed;
    bottom: 10px;
    right: 10px;
  }
}

Keep in mind that every parent element (every element above the image) cannot have position: relative, because the bottom and right rules will count from the bottom and right section of the relative element. The only tag above the image you can specify position: relative to, is either body or html.

Loizos Aristeidis
  • 119
  • 1
  • 9
  • Okay, I am open to judgement, but how is it completely wrong can I ask? Because I think I gave him a working code snippet, much like what you answered above. Actually, you essentially went ahead and described the very thing I did. – Loizos Aristeidis Dec 14 '21 at 13:45
  • 1.) fixed position isn't relative to any element, but to the viewport/screen. relatively positioned elements don't play any role for fixed positioned elements. 2.) relative position can be applied to *any* block element 3.) The "anchor" for an absolutely positioned element is the next higher parent element which has `position: relative` – Johannes Dec 14 '21 at 13:53
  • Concerning #2 and #3, you wrote: "The only tag above the image you can specify position: relative to, is either body or html". And I certainly didn't copy your answer, since it's 80% wrong. – Johannes Dec 14 '21 at 14:12
  • Ok so I added ''' position: fixed; bottom: 0; right: 0; width: 300px; border: 3px solid #73AD21; ''' The problem is that, for some reason my element sticks to the right top corner instead of the bottom one O;o – zippo Dec 15 '21 at 03:32
0

To take an element out of the document flow and fix it at a particular position on the screen, you can use position: fixed and the top/bottom/left/right parameters, and you can put all that into a media query to apply it only below a certain screen size.

Johannes
  • 64,305
  • 18
  • 73
  • 130
0

I've figured it out. These guys helped me with the position:fixed.

My problem then was that for some reason bottom:0 and right:0 would put my logo on top instead of the bottom. That was because I had another media query on it for earlier when I tried different stuff, and forgot about it.

Thank you for help!

zippo
  • 11
  • 1
  • 2