CODEWITHSUNDEEP
htmlcss
yavor.vasilev
yavor.vasilev

Reputation: 280

Header navigation with background images

I am trying to create a header + navigation that should look like this:

header navigation

However, I found some difficulties completing the task. What I have done so far, is to set a solid background for the header. Then, add the jagged (weave look-alike things) with ::before and ::after elements (also with background pictures) and so far it looks great, except that when I hover over an element, the :before and :after elements don't get colored with the same color as the hovered element (as the example in the picture).

Is my approach, the correct one or am I missing something? I have also thought about creating an Overlay Div on top of the whole header, but then issues will appear on different resolutions and also, I do not think that this fixes the original issue, different color on hover.

Do you guys have any ideas that could help, or materials that did I did not manage to find on the web?

Here is my code: https://jsfiddle.net/nbrLck99/1/

.main-nav::after {
    content: '';
    position: absolute;
    top: 100%;
    background-image: url('../images/desktop-header-background.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center bottom;
    height: 10px;
    display: block;
    width: 100%;
}

EDIT: managed to upload and tun the image in jsfiddle.

Upvotes: 1

Views: 1068

Answers (1)

Faegy
Faegy

Reputation: 992

This won't work.

Your :after element is a background image. This means it isn't affected by by the background-color attribute. You'll have to create an :after element for every menu item and then alter it's background image with the :hover selector. You'll need an image for the default background and one for the hovered one. If you wish to have different "waves" you can create an image for each tab.

A quick preview:

.main-nav {
    position: relative;
}
/* magic starts */
.level_1 > li > a::after {
    content: '';
    position: absolute;
    top: 100%;
    background-image: url('https://i.imgsafe.org/a58a017b5d.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center bottom;
    height: 10px;
    display: block;
    width: 100%;
}
.level_1 > li:hover > a::after {
    background-image: url('http://i.imgsafe.org/a5f53cc8bf.png');
    z-index: 10;
}
/* magic ends */

.main-nav .level_1 {
    margin: 0;
    display: inline-block;
    background-color: #0E5780;
    width: 100%;
    position: relative;
}

.main-nav .level_1 li {
    position: relative;
}

.main-nav .level_1 li:hover {
    background-color: #f00;
}

.main-nav .level_1 > li {
    display: block;
    float: left;
    padding-top: 15px;
    padding-bottom: 15px;

}

.main-nav .level_1 li a {
    display: block;
    padding: 10px;
}

.main-nav ul ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    padding-top: 15px;
    background-color: #0f0;
}

.main-nav .level_1 > li:hover ul {
    display: block;
}
<div class="container">
        <nav class="main-nav">
            <ul class="level_1">
                <li class="dropdown">
                    <a href="#">home</a>
                    <ul class="level_2">
                        <li><a href="">something</a></li>
                        <li><a href="">something</a></li>
                        <li><a href="">something</a></li>
                        <li><a href="">something</a></li>
                    </ul>
                </li>
                <li><a href="#">about</a></li>
                <li><a href="#">something</a></li>
                <li><a href="#">something</a></li>
                <li><a href="#">something</a></li>
            </ul>
        </nav>
    </div>

Upvotes: 1

Related Questions