Tagged: ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #239712

    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

    #239713

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

    #239767

    Hi,

    Can you post the link to your website please?

    Regards,
    Josue

    #239871
    This reply has been marked as private.
    #239939

    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

    #240062

    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! :)

    #240070

    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

    #240315

    Thanks! Works great!

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

The topic ‘Shadow to Header’ is closed to new replies.