Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #252954

    Hi everyone,

    1) I’d like to apply box-shadow “effect 2” and a
    2) centered, circular gradient (like here: ) and also
    3) bold font both for the main menu and sub-menu
    … to the main header.
    4) Make the top-bar not-fixed, so that when the visitor scrolls down, only the main header stays fixed, or sticky, while the top-bar gets “scrolled away” (is this still English?), or disappears.

    The “effect 2” solution is published here: (Purchase code hidden if logged out) -effects
    The gradient generator is published here:
    However, pasting in the codes into quick css does not provide the desired effect, and unfortunately I don’t know any better, as my knowledge of css is currently at the diaper-level.

    For the sake of the remaining hairs on my head – does any know how to apply these codes through quick css? And if it’s not possible with quick css – where exactly in the child-theme css files should these code-lines be pasted in? Right now I’m pasting in various combinations of the css code, hoping that by some miracle I’ll hit the right combination…

    In case that matters, my current quick css “basket” looks like this:

    #header_meta {
    box-shadow: none;

    #header_main {
    background-color: #0278fe;
    border-top: none;
    border-bottom: none;
    box-shadow: 0px 8px 12px rgba(100, 100, 100, 0.49);

    /*—- Font Menu Hover Color —-*/
    #top .header_color .main_menu .menu ul li>a:hover {
    color: #0278fe;

    /*—- Background Menu Hover Color —-*/
    .header_color .main_menu .menu ul li a:hover {
    background-color: #ffffff!important;

    .main_menu .menu li ul a {
    background-color: #0278fe!important;

    Thanks a lot,



    Hey nerkasa!

    We can’t help you with 1 + 2) – the customization requires some work and is beyond the scope of our support forum. You can hire a freelancer to implement these effects.

    3) Insert this code into the quick css field:

    #top .header_color .sub_menu ul li a, #top .av-main-nav li a{ font-weight: bold;}

    4) You can’t “scroll” it away without some theme code customization (new jquery animation effect, etc.) but you can hide it with css when the user scrolls down. This may trigger a “shift/jump” of the main menu though. Insert this code into the quick css field

    .header-scrolled #header_meta {
    display: none;



    That did the trick, thanks yet again !


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

The topic ‘Adding shadow effect 2 and gradient for header; Making header top-bar not-fixed’ is closed to new replies.