Header - Fit the entire width of the page?

Activello
1

Hi Movin,

I’ve gone over many of your previously answered threads before posting here but haven’t found any luck.

I need your help with fitting the header of my page to fit the entire width of the screen.

Currently it leaves small gaps near the edges of the pages.

Website: www.fastfoodprice.com

Thank You for your help!

PS: This is the Custom CSS being used:
#masthead > .container {
display: none;
}

.site-navigation-inner .nav-search {
display: none;
}

nav.navbar.navbar-default {
box-shadow: none;
}
nav.navbar.navbar-default {
width: 1050px
}

.page .page-header {
display: none;
}

div.site-navigation-inner.col-sm-12 {
width:1265px
}
div.site-navigation-inner.col-sm-12 {
height:2px
}

2

Hi @iampossible,

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

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Activello Options -> Other -> Custom CSS

header#masthead,
nav.navbar.navbar-default {
    background-color: #000;
}
#page .site-navigation-inner.col-sm-12 {
    height: auto;
}

Best Regards,
Movin

3

Hi Movin,

Thank you for your quick response.

I tried this method earlier but unfortunately faced other problems because it is a sticky header (stays with you if you scroll down). So when you scroll down the settings mentioned above still leave white gaps on the edges. Is there another way to make the header fit the whole screen?

Best Regards

-PS: I also tried another approach of increasing the width of div.site-navigation-inner.col-sm-12, unfortunately increasing the width does not get rid of gaps on the sides, it just widens the page.
div.site-navigation-inner.col-sm-12 {
width:1265px
}

4

This is happening because of ubermenu plugin that you are using on your site so please also use the below CSS code along with above CSS code.

#page .ubermenu-main {
    width: 100% !important;
    left: 0;
}