Kevin Powell - Community•2y ago

Responsive navbar bug

When i switch to the mobile view, the navbar opens and closes quickly and i only want it to open when you click on the hamburger menu. Also the height changes when switch to mobile view. What can I do to avoid these 2 issues?

41 Replies

Aman•2y ago

https://codepen.io/Aman-sghh/pen/WNyPgVa

Unknown User•2y ago

Message Not Public

Aman•2y ago

I meant the height sorry.

Unknown User•2y ago

Message Not Public

Aman•2y ago

@Mr Bombastic Thanks man, Fixed everything apart from one thing. I started only 4 days ago and I have a hard with the positioning

Aman•2y ago

So this heading is in the centre now but when i resize my window, heading also moves. I want the heading to scale up or down but not move from it original place

Unknown User•2y ago

Message Not Public

Aman•2y ago

See it moves to right.

Unknown User•2y ago

Message Not Public

Aman•2y ago

This is not the final design, Goal is to have the elements in the right spots first and change colour later. @Mr Bombastic can you help me with this issue?

.game_name{
    display: inline-block;
    align-items: center;
    color: white;
    text-align: center;
    font-size: 80px;
    position: absolute;
    top: 25px;
    left: 270px;
    text-shadow: 0px 8px 4px rgba(46,206,197,0.79);
    
}

.first_back{
    background-repeat: no-repeat;
    width: 100%;
    height: auto;
    max-height: 480px;
    margin-top: 3%;
    opacity: 0.50;
    position: relative;
    border-bottom: 2px solid yellow;

}

.game_name{
    display: inline-block;
    align-items: center;
    color: white;
    text-align: center;
    font-size: 80px;
    position: absolute;
    top: 25px;
    left: 270px;
    text-shadow: 0px 8px 4px rgba(46,206,197,0.79);
    
}

.first_back{
    background-repeat: no-repeat;
    width: 100%;
    height: auto;
    max-height: 480px;
    margin-top: 3%;
    opacity: 0.50;
    position: relative;
    border-bottom: 2px solid yellow;

}

css for the image and heading

<div>
                <img src="back.jpeg" class="first_back">
                <h1 class="game_name">Sokoban</h1>
            </div>

<div>
                <img src="back.jpeg" class="first_back">
                <h1 class="game_name">Sokoban</h1>
            </div>

HTML

Unknown User•2y ago

Message Not Public

Aman•2y ago

if you look at this image the heading Sokoban is in center. but when i resize my window , it moves left and right. I only want it to scale up or down I hope this was more clear

Unknown User•2y ago

Message Not Public

Aman•2y ago

Yes it a background image So is there anything i need to delete from original css? Image is fine, it scales up or down perfectly, its the heading on the top thats the issue

Unknown User•2y ago

Message Not Public

Aman•2y ago

lemme try it quickly

Unknown User•2y ago

Message Not Public

Aman•2y ago

nope nothing works, idk if im doing the right thing tho

    background-position: 50vw 50vw;

    background-position: 50vw 50vw;

I added this

Unknown User•2y ago

Message Not Public

Aman•2y ago

what do you mean?

Unknown User•2y ago

Message Not Public

Aman•2y ago

Nothing changes with or without the background position

Unknown User•2y ago

Message Not Public

Aman•2y ago

Aight one sec Nope

Unknown User•2y ago

Message Not Public

Aman•2y ago

https://codepen.io/Aman-sghh/pen/WNyPgVa there you go thanks man for helping me out @Mr Bombastic Have you found the issue?

Unknown User•2y ago

Message Not Public

Aman•2y ago

yeah is that an issue? i struggle with the positioning

Unknown User•2y ago

Message Not Public

Aman•2y ago

I dont want to do anything with the image I want the image behind and the heading Sokoban on top of it its fine if the image streches for now i want the heading to be in one position on matter only get larger and smaller after resizing

Aman•2y ago

see the heading is not in the center

Aman•2y ago

In this case i want the heading to get smaller and stay in the center Do you know how to do that? I watched million videos already and they dont help at all

Unknown User•2y ago

Message Not Public

Aman•2y ago

Yes, I'll do it but this bug will keep bugging me haha, do you mind helping me?

Unknown User•2y ago

Message Not Public

Aman•2y ago

yeah

Unknown User•2y ago

Message Not Public

Aman•2y ago

yes

Unknown User•2y ago

Message Not Public

Aman•2y ago

I had <section> before should i change it back?

Unknown User•2y ago

Message Not Public

Gaming

Programming

Responsive navbar bug