Drop Shadow & menu items colour

About this forum
These forums have not been active for several years. They're available for search and reference, but a lot of this information is likely out of date.

For current information, try visiting our Knowledge Base.

Home / Support / Beaver Builder Theme / Drop Shadow & menu items colour

This topic is: resolved
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #2162

    Kay
    Participant

    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

    #2164

    Robby McCullough
    Keymaster

    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!

    #2220

    Kay
    Participant

    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!

    #2279

    Kay
    Participant

    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

    #2283

    Robby McCullough
    Keymaster

    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!

    #2304

    Kay
    Participant

    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.

    #2309

    Robby McCullough
    Keymaster

    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!

Viewing 7 posts - 1 through 7 (of 7 total)

The forum ‘Beaver Builder Theme’ is closed to new topics and replies.