transparent website header and activated extended header image

  • sandbox.pictures

    (@freiraeume)


    5 years, 1 month ago

    Hi,
    I have activate the extended header image and would like to have the header (menu and logo) overlayed the header image with a opacity, not completly trancparent. So that you can see the menu better.
    Thanks.

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

Viewing 2 replies - 1 through 2 (of 2 total)
  • Theme Author satoristudio

    (@satoristudio)

    5 years, 1 month ago

    Hello @freiraeume, thanks for choosing Bento! There’s no setting for this in the theme right now, but you can achieve your desired effect the following way: first, tick the “Transparent website header” checkbox in the “Page Header Settings” section while in the edit mode for that page. Then add the following snippet to the “Additional CSS” tab of the Customizer (“Appearance -> Customize” admin section):
    .site-header.no-fixed-header { opacity: 0.7; }

    Please note that this will make the entire header semi-transparent, including the logo and the menu – because of how CSS rules apply to HTML elements.

    Thread Starter sandbox.pictures

    (@freiraeume)

    5 years, 1 month ago

    Many Thanks! That worked. It just does not quite live up to my wishes. I can certainly change that with a logo with a white background, but the menu will still be transparent. The view is strongly dependent on the background image. But thanks for the snippet.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘transparent website header and activated extended header image’ is closed to new replies.