Responsive Navigation Bar Issue

Hello, thank you for viewing my post

I’ve set up a responsive nav bar and a responsive slider and I have had a few issue with them. I cannot seem to figure out how to get the dropdown button to work fit in line with the nav bar links when the screen size is reduced. Another issue I have had is that the slider comes in front of the the dropdown menu and I do not know how to keep it in the background.

I have linked the files below and hope you can have a look when you can.

Thanks for your time, hope you can help me out with this.

use z-index to put things in background or foreground

for eg. z-index: 1 will put things ahead of something that has z-index: 0 or z-index: -1

ps. it is easier to help with the other issue if you have a codepen to share with us.


I agree with @hbar1st. It is a lot easier to share your work if you use codepen or something similar.

@coden00b Here’s codepen with your slider site. If you make an account on codepen you can fork it to make your own copy for sharing.

1 Like

Thanks, I’ve edited in a codepen. Cheers for the advise.

Thanks for your help and advice, do you know how I position the title of nav and the nav button so they do not overlap when the screen size changes?

Thanks again,

thanks for doing that. ok thanks for clarifying , i will take a look.

1 Like

one way:

create a nav-title selector in your @media area and set
position: relative;
right: 1.2rem;

1 Like

sorry I do not know what you mean by nav-title selector, the nav-title element?

yes, in your code you have a class of type nav-title for your title.
Create a new css selector for it and then set the position to relative and right attribute to 1.2 rem .
That is one way.
A better way is to use a grid layout.

1 Like

Do you have a link to any grids?

I like to read and refer to this website:

when I make a grid. It is a detailed explanation.

1 Like

Thank you, i’ll get to reading that and let you know how it went :slight_smile:

1 Like