Navigation within a hero image
hello @everyone! I'm trying to put a navigation bar on a hero image.. for some reason I get the navigation beneath the photo... How should I position navigation where I want it to be? I deeply appreciate every suggestion and help ... 🙂
7 Replies
1. Don't ping
@everyone. It's disabled for a reason
1. What have you tried so far?
1. What does your code look like?
Please read #How To Ask Good Questions for more on how to, well, ask good questions :pI (for 1) am interested in contributing to the solve of this, but as just_13eck described, the context of prior efforts within the setting you need it to work in would help to narrow down the issue to your specific use case.
The codepen.io site can be very handy to model your case.
Just put an img tag pointing to whereever your hero image is currently hosted along with whatever HTML you have as navigation, a sample fragment is plenty, say, if your nav is 10 options, just put 2 or 3 in the codepen so the concept is represented.
Looking forward to see what you share about this.
@13eck @ProdJuan thank you so much for your messages, I'm new in this group and didn't know about tagging everyone. Sorry. Well, actually, it looks like the problem is that my html can easily find my photo, which is not the case with css. when I write in css the following : .background-image {
width: 100%;
height: 800px;
background-image: url("/webdev-my-name/html/img/64.....jpg"); my background photo appears and navigation is where it should be, so the problem looks solved but I have 'errors' in css-php storm because that's not the right path for a background image normally- background-image: url("img/64....jpg");
Could it be the problem with server?
if you provide the full address of your image, I could suggest the specific CSS rule property that will make the image URL work...
generally a server will not care how an image is referenced and will send the requested image to the browser whether it be
<img src="..." /> or well, the full address would be webdev/html/img/64....jpg was that on your mind?
so if I were to put that whole address in my browser, then I'd see the image that's supposed to appear within your hero element that the nav you want to render in front of? when I say "full address of your image", I mean something that looks like http(s)://www.the-site-where-the-image-is-hosted.com/sub/sub/sub/image-name.jpg 👈
was any of this helpful to get a resolution or are you "still stuck"?
(Also, since you're the author of this thread, you may add the 'SOLVED' tag if you no longer want/need discussion/follow-up for this question.)
I appreciate so much your help 🙏 . the image is shown in browser, everything's working. The only thing what's bugging me is my css file, because I have so much errors now, and I just have to put URL for a photo like this ("webdev/html/img/6....jpg") and css doesn't
it for some reason. You've helped me so much, really, thank you 🙏 .