Need a little CSS help

Hey guys this might go beyond the normal support ticket, but I didn’t get a response from the community.

This is the dev site I am working on http://intheblack.flywheelsites.com/

There are two things I’m trying to do: one is get the menu on desktop to be centered. The client didn’t want the logo in the normal spot, so I used display:none to remove it, but I’m obviously still getting the space to the left and I haven’t been successful in fixing it.

The other thing is that I’d like to put in a background that sits behind the entire site. I made a gradient in Photoshop, set it as the background image, but then nothing happens because I can imagine I need to make the background of the body and header transparent, but again, I don’t know the exact CSS to do that.

Can I get a little help?

Brian

Hi Brian,

Thanks for writing in!

You can add the code below in X > Launch > Options > CSS


/* center navigation */
.masthead-inline .desktop .x-nav {
    float: none;
    text-align: center;
}

.x-navbar .desktop .x-nav>li {
    float: none;
    display: inline-block;
    vertical-align: top;
}

/* make background transparent */
/* body  background */
.site {
   background:transparent;
}

/* header background */
.x-navbar {
    background-color: #fff;
}

For you sections, you can change the background from the section element itself.

Hope that helps.

1 Like

That’s great, Paul, perfect on the navigation!

Now with the background I still want some changes. I’d like the background to be the size of the whole screen and to be stationary, so basically the content looks like it it’s floating above it, and for the header to be transparent also. Do you have any tips on that?

Thanks for your help.

Brian

Hi There,

On Cornerstone, click on your first section and add to the style box

height: 100vh;

Now go to Theme Options CSS and add

.home .x-navbar {
background: none !important;
}

.home .x-main.full {
  
    margin-top: -100px;
}

Hope it helps!

That’s good. I have a bunch of adjustments to make but overall, that’s what I wanted. Thanks!

Great, we’re very happy to be able to help! Have a great day!