Drop Shadow for Header

  • Resolved maxlondon

    (@maxlondon)


    3 years, 1 month ago

    Hello,

    I like that this theme is light, but I am looking to add a drop shadow to the sticky header that appears once one is scrolling.

    How could I do that, select the ‘header template’ and in the ‘advanced’ sidebar menu then choose ‘header’ element from the drop-down and then add something in the ‘add additional css class’ ?

    What would I fill there? I tried with samples from the internet but it would not work.

    I should also note, whilst the header is sticky on all pages, on the post pages the header is not sticky.

    Thank you in any case,

    Max

    • This topic was modified 3 years, 1 month ago by maxlondon. Reason: added link

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter maxlondon

    (@maxlondon)

    3 years, 1 month ago

    So I solved it in adding the simple custom CSS editor and then calling that class from the advanced settings. The sticky header would stick once grouping it.

    Moderator Kathryn Presner

    (@zoonini)

    3 years, 1 month ago

    Glad you solved both issues!

    Stickying a header does require grouping it first – here’s a tutorial in case it helps anyone else.

    adding the simple custom CSS editor and then calling that class from the advanced settings.

    If you prefer not to use a plugin for your CSS, you could instead add your CSS in the Site-Wide (global) CSS editor. This editor is quite similar to the old Additional CSS panel in the Customizer, in classic themes. You’ll find screenshots showing where to find it in the documentation.

    Thread Starter maxlondon

    (@maxlondon)

    3 years, 1 month ago

    Thank you for letting me know, I have now removed the plugin and used this native, globally applied method to insert the drop shadow command.

    Last but not least, I can not set round corners, i.e. radius 2, in pictures that are embedded through the ‘media and text’ block. Is there a way to do this then? I.e. in the footer of the web page i was able to do it, but in the media and text blocks that option is just not available.

    Thank you!

    Moderator Kathryn Presner

    (@zoonini)

    3 years, 1 month ago

    The Media & Text block doesn’t have a border radius option. If you can provide a link to the page or post I can have a look at some CSS. Please first go ahead and add a custom CSS class on it in the “Additional CSS class(es)” area so that can be used to target this specific block. Something like rounded-media-text could work.

Viewing 4 replies - 1 through 4 (of 4 total)

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