I would like my "logo" to go the entire width of the screen.

Activello
1

I want my logo to go the full width of the screen instead of having the “margin” or padding on the sides as blank space.
is there a simple bit of CSS to add for this? i cant seem to find where the side classes are to change them.
any help would be greatly appreciated.

Thanks

2

Hey there,

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 -> Additional CSS

/*full width logo container*/
#masthead > div{
  max-width:100%;
  width:100%;
}

Best regards,
Support.

3

This worked perfectly for the logo but it has made the search bar on the site go down from the menu line.
The current code i have are these 2 pieces:

.site-navigation-inner.col-sm-12 {
float: none;
padding: 0;
margin: 0 auto;
display: table !important;
width: auto;
}

/full width logo container/
#masthead > div{
max-width:100%;
width:100%;
}

i think the second chunk of code is altering something with the first chunk…
is it possible to get the search bar on the same line as the menu categories and also keep the full width for the logo?

Thanks again!

4

Hi there

@tipper hope you are having a good day :slight_smile:

Please provide url of your website and i will take a look

5

Hello Noda,
Sorry i had not replied earlier, I work in northern Canada where there is no internet or at best poor internet.
The url is Unfancyfood.com
thank you for your help. i appreciate it alot!
hope to hear from you soon.
thanks

6
is it possible to get the search bar on the same line as the menu categories and also keep the full width for the logo?

Please use following custom CSS code to achieve this.

#masthead .navbar-collapse.collapse {
    float: left;
}
7

Hello Movin, This fix was perfect. Your help so far in getting this site started has been imperative.
I was hoping you could help me with another issue the menu bar seems to have created.
I added the following code to make the menu bar “fixed” and stay on the top but it now cuts off some of the wording on the “eat Healthy” page. is there a way to make the page start under the menu instead of behind it or to fix the issue somehow.
Any help would be appreciated.

/Static menu/
.navbar.navbar-default {
width: 100%;
position: fixed;
z-index: 2;
}

8

Please do not post your every reply as private if it doesn’t contain any sensitive information. I have made your above posted reply public.

I added the following code to make the menu bar “fixed” and stay on the top but it now cuts off some of the wording on the “eat Healthy” page. is there a way to make the page start under the menu instead of behind it or to fix the issue somehow.

Please use below CSS code to fix this issue.


#page {
    margin-top: 40px;
}
.home #page {
    margin-top: 18px;
}
.navbar.navbar-default {
    top: 0;
}
9

This worked perfectly, thank you for the help

10

Hello there,

I am glad the solution worked for you.
Please feel free to contact us again in the future regarding any other issues.

Best Regards,
Support