TopNav opacity relative to logo+menu, welcome dialogue, etc

Hello. My site is www.villa-mirta.hr

  1. How can I manipulate the opacity of topnav (basically what I’d like to do is have it be black+have an opacity of like 20%)? What custom CSS should I use?

  2. how can I manipulate the welcome page? Namely I’d like to remove the button and edit the welcome text a bit

  3. is there a way of copying the frontpage of Sydney and using it for other pages on the website? I’ve tried doing so but it ends up as a blank page?

  4. how do I change the font size of “OUR SERVICES” text?

Thanks in advance folks!

1

You can use this CSS code.

    .site-header:not(.float-header) {
      background-color: rgba(0, 0, 0, 0.2);  
    } 

Add it to Appearance > Customize > Additional CSS from dashboard.

2

From your site admin area, go to Appearance > Customize > Header area > Header Slider. Specify your slide title in there. To remove the button, what you need to do is leave empty the inputs in the “Call To Action Button” section.

3

You can use the Duplicate Post plugin to clone your frontpage.

4

Use this custom CSS code:

    #panel-59-1-0-0 p {
      font-size: 40px !important;
    }

Regards,
Kharis

First of all, thanks for helping! :slight_smile:

  1. That looks good(and I’m probably going to use it), but what I had in mind is that it looks exactly like what you linked but when you’re scrolling down and the TopNav is in sticky/follow mode - currently it’s in ugly white/nontransparent and whatever color I use it looks ugly because of the opacity

  2. Thanks! That worked!

  3. That works, cheers! Even though it doesn’t copy the giant picture from the frontpage, but I can get around that I guess.

  4. That works, thanks! Is it only for that specific instance or is it side-wide manipulation? If it’s not, how can I find the panel ID for future use?

1

Please try this code:

.site-header,
.site-header.float-header {
background-color: rgba(0, 0, 0, 0.2) !important;
}

Let me know how it works for you.

4

You can use the web browser’s inspector tool.

Regards,
Kharis

Works amazingly! Thank you so so much!

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis