Tagged: ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • March 18, 2014 at 11:34 pm #239712
    WANTED1403

    Hey Guys!

    I am currently experimenting with a shadow effect which I would like to apply to my Header.
    At the Moment I added following code to my quick css:

    #header_main .container, .main_menu ul:first-child > li > a {
 height: 70px!important;
 line-height: 70px!important;
box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.5); }

    This Looks like the following:

    As you can see the shadow does not go completly from one side to the other (full width). I guess that this has something to do with the limited Header Container. But I assume that you have another possible solution (full width) which might work perfect for me.

    At the same time you can see that the Container for each menu also currently has shadows due to above mentioned code.
    This is something I do not like to have with the new code. But besides that you can now also see that the word Kontakt is aligned to the right side of the last menu Container and not centered. That leads to the Situation that during mouseover the line under the word Kontakt is not alligned properly. Do you have any idea how to fix this?

    Thanks in advance for your help!
    Cheers! Matthias

    March 18, 2014 at 11:36 pm #239713
    WANTED1403

    Oh, I think the link is missing. I herewith try again:
    Header with Shadow

    March 19, 2014 at 2:03 am #239767
    Josue

    Hi,

    Can you post the link to your website please?

    Regards,
    Josue

    March 19, 2014 at 7:28 am #239871
    WANTED1403
    This reply has been marked as private.
    March 19, 2014 at 9:01 am #239939
    Ismael

    Hey!

    Please use this instead of the code you’re using:

    .html_header_top.html_header_sticky #header {
position: fixed;
box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.5);
}

    Best regards,
    Ismael

    March 19, 2014 at 2:17 pm #240062
    WANTED1403

    Thanks I will try later when I am back home!

    Can you also help to fix this:

    But besides that you can now also see that the word Kontakt is aligned to the right side of the last menu Container and not centered. That leads to the Situation that during mouseover the line under the word Kontakt is not alligned properly. Do you have any idea how to fix this?

    Thanks! :)

    March 19, 2014 at 2:45 pm #240070
    Yigit

    Hey!

    Please add following code to Quick CSS in Enfold theme options under Styling tab

    .html_main_nav_header #top .main_menu .menu>li:last-child>a, .html_bottom_nav_header #top #menu-item-search>a {
padding-right: 13px;
}

    Best regards,
    Yigit

    March 19, 2014 at 8:02 pm #240315
    WANTED1403

    Thanks! Works great!

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Shadow to Header’ is closed to new replies.