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.
https://drive.google.com/open?id=1ZnkHwIg-wCjgnZ3LQjkzHOIhjJW4ByFL
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.
2 Likes
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 
1 Like