A quest for a full width banner/header

Sparkling
1

Hi Colorlib,

Long-time lurker, first time poster. These forums have been excellent in helping me along the way, but I’m finally admitting defeat and looking for a little help :slight_smile:

I’ve been trying to insert a full width header/banner image to the website I have been building for a friend on mine.

In my quest to do this, I fear I’ve been starting to damage the site (layout/responsiveness) with CSS. I just wondered whether there was a definitive way of achieving this? The banner is the one currently on the website - which works fine until large resolution screens that the average desktop are used.

Apologies if I have broken your theme!

Cheers,
Chris

2

Hi Chris,

I hope you are well today and thank you for your question.

It seems you are doing right. Just remove the following custom CSS code

.container {
    width: 98%;
}
.nav.navbar-nav {
    margin-left: 2px;
    margin-right: 2px;
    text-align: center;
    width: 93%;
}

and use the following custom CSS code.

.nav.navbar-nav {
    float: none;
    clear: both;
    width: 1170px;
    margin: 0 auto;
}

Best Regards,
Movin