Drop Shadow & menu items colour

BB Theme
1

Hi Robby,

Is it possible to add a drop shadow to a boxed website? I want it to sit up off the background.

http://beachfinancial.breakawaycreative.com.au/

Can you also tell me how to change the colour of the menu bar items from white to the stone colour I’ve used for the content background.

Thanks

Kay

2

Hi Kay! You can add a box shadow to the .fl-page div. I would also maybe give it a bit of top margin to add to the effect. Here is the CSS:

.fl-page {
    box-shadow: 0 0 20px rgba(0,0,0,0.3);
    margin-top: 20px;
}

Here is the CSS to change the navigation. You also might need to adjust the hover and active nav classes.

.fl-page-nav-right .fl-page-nav-wrap .navbar-nav > li > a {
     color: #ffffff;
}

Let me know if that works for you. Thanks Kay!

3

Thanks Robby, that worked perfectly.

I think I do need to adjust the colour of the hover, can you send me the code, I want to make it the same red/orange as the highlight colour.

By the way, I LOVE this theme and pagebuilder!

4

Hi Robby

Can you answer my question re adjusting the colour of the hover that I sent to you on 8th August of days ago?

Thanks

Kay

5

Hi Kay,

Glad you’re enjoying the builder and theme! Sorry, I must have overlooked your second question. Here is the line of CSS that will change the hover color. You’ll still need to plug the color’s hex code in there:

.fl-page-nav-right .fl-page-nav-wrap .navbar-nav > li > a:hover {
    color: #FFF;
}

Are you familiar with the site css-tricks.com? I ask because they have a great community/forum that you might be interested in. We’re happy to help with any problems/issues with our products, but many of these questions could be answered by a CSS expert. I would recommend checking out their forums, or a similar web development community, if you ever need faster responses to these types of questions:

http://css-tricks.com/forums/

That said, I am always happy to help provided I have the time. Thanks again Kay and good luck!

6

Oh, sorry Robby, I thought thats what the support area was for. I also use a lot of themes from Elegant Themes and they help me with all this type of stuff (and everyone else!). Apologies if I’ve been a nuisance.

I did have another question (sorry), regarding the following site:

http://lemonthyme.breakawaycreative.com.au/

I want the drop shadow to sit behind the main body but not the header section, when I use the above code, it puts a drop shadow behind the header section as well.

Also, while, you’re there, is it possible to put an background image behind the header (not for this site but for future reference) so that it sits behind the logo.

7

No worries at all. You’re not being a nuisance in the slightest =D. I just have to prioritize bugs and issues specific to our software, so I wanted you to have another resource in case we get too busy.

That said, you could put the box shadow on the .fl-page-content div instead. The only issue there is that the shadow isn’t on the menu bar. Try it and let me know if you think it looks okay. Any other solution would be pretty complicated as we would probably need to rework the markup so the menu bar is in the same container as the content. It’s doable, but it would be cumbersome.

Regarding the header image, I put some CSS that should work in the other thread here in the forums. Let me know if that works for you! Thanks Kay!