Transparent taskbar

Hi there,

By taskbar, do you mean the nav background here –>> https://prnt.sc/lp0acx
Or are you referring to something else?

Let us know so we can take a look.

You can add the following snippet from your Customizer > Additional CSS.

.nv-navbar {
    background-color: gold;
}

Just change the color to your preferred one.

Let us know how it goes.

@naskox

You need to change the background color to transparent. So on my snippet, instead of gold, you can use rgba(255, 255, 255, 0).

The snippet then would look like this:

.nv-navbar {
    background-color: rgba(255, 255, 255, 0);
}

Hope that helps.

• This reply was modified 5 years, 4 months ago by AC.

Using Custom CSS (Additional CSS) usually requires the “!important” qualifier to override the default CSS style sheet.

It will look like this,

.nv-navbar {
background-color: rgba(255, 255, 255, 0) !important;
}

Assuming she gave the correct selector name for it, you add the “!important” qualifier with a space after the rgba end bracket.

If that does not work, provide a URL to the page and I can locate the correct CSS selector.

Note: Elementor, a page builder, does not modify the top main menu. It only provides element/content positioning and styling to the page itself. Styling of the main menu is controlled by CSS. Structure of the Main Menu is by HTML5 inserted by PHP. Access to styling the Main Menu by the user is with the Customizer, if the theme design provides it. Otherwise changing the styling falls to Custom CSS.

• This reply was modified 5 years, 4 months ago by mwarbinek. Reason: added info
• This reply was modified 5 years, 4 months ago by mwarbinek. Reason: More Info

Ok, here we go. Please ensure you read everything here first.

Take a look at the screenhot of what I did using the developer mode of the browser:

https://prnt.sc/lq3ft1

(ignore the white border around the image at the lightshot site)

Next…

1. Remove from your Custom CSS.

.nv-navbar {
background-color: rgba(255, 255, 255, 0) !important;
}

2. Look in the Customizer for any settings for the top bar text/font color and for the top menu text/font color. If it has settings for them, change the color to white for both of them. – Also make the menu font larger to 16px which is Google’s requirement for mobile screens. For the top bar where it has your phone number, make that a larger font, about 13px or 14px. It still has to be a bit smaller than the menu font size.

If there are no settings for the text/font colors mentioned, then insert the following into the Custom CSS (copy it and paste),

/*Top Bar & Nav Text*/
.nv-top-bar-content {
color: #FFFFFF !important;
}
#nv-primary-navigation a {
color: #FFFFFF !important;
}

3. Next, copy the following CSS to your Custom CSS in Customizer, then read the notes after it.

/*Top Wrapper Block*/
.wrapper::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0,0,0,0.5);
}
.wrapper {
background: transparent url('http://www.workandtravelagency.bg/wp-content/uploads/2018/11/action-america-architecture-378570.jpg') no-repeat 0 0;
background-size: 100%;
}
.header {
background-color: transparent !important;
}
/*Top Nav Bar*/
.nv-top-bar {
background-color: transparent !important;
}
.nv-navbar {
border-bottom: 0px solid #F0F0F0 !important;
}
/*Mobile Fix-Menu Toggle Button*/
@media screen and (max-width: 959px) {
.navbar-toggle-wrapper {
flex-wrap: wrap;
}
}

Notes:
1. Above Custom CSS replaces the image, and removes the white color to the elements or blocks and made them transparent.

2. The Elementor section where you used the large image, remove only the image, but – For now, if possible, keep the overlay color that Elementor was using when you inserted the image, the overlay is the darkening of the image using a transparent opacity setting of the color black..

If Elementor won’t keep the overlay color, don’t worry, just carry on.

The image is replaced above using Custom CSS. Elementor is not able to affect the HTML/Class named tags above and cannot do what the Custom CSS is doing.

3. If the overlay color is inconsistent, such as parts darker than other parts, using the Custom CSS and using Elementor, then go back to Elementor where you inserted that image and remove the overlay. This should make the overlay consistent. (I made these steps because I am not in your WordPress to test things using Elementor and Custom CSS).

4. The @media part of the Custom CSS is to fix the positioning of mobile menu button in the mobile screens.

5. Redo your logo, it has to be a PNG using a transparent background. Else the white JPG background will make the appearance look like a pasting of an image like on paper.

Final Note:
Well, that should do it. Please note, the image you used is 5088 px wide. That is huge and load time for that page may be really affected because of it. If that happens, then you have to edit the image down to 2600px wide and end up adjusting the page content in Elementor.

• This reply was modified 5 years, 4 months ago by mwarbinek. Reason: added info
• This reply was modified 5 years, 4 months ago by mwarbinek. Reason: corrected info

If you are going to keep the Custom CSS image insertion as suggested, then you also need to add this to the Custom CSS,

/*Mobile Menu Button */
.icon-bar {
background: #FFFFFF !important;
}

If you choose to return to the default theme layout, then don’t worry about this.

• This reply was modified 5 years, 4 months ago by mwarbinek. Reason: corrected info

Sorry, getting tired, was up all night. I am in North America.

Grey Bar background
At this Custom CSS entry,

.nv-navbar {
border-bottom: 0px solid #F0F0F0 !important;
}

…add in the following,

background-color: rgba(255,255,255,0) !important;

…so it looks like this,

.nv-navbar {
border-bottom: 0px solid #F0F0F0 !important;
background-color: rgba(255,255,255,0) !important;
}

The other changes to the background color are fine, leave them as is.

Image in Mobile Screen
Add the following,

/*Mobile Header Image*/
@media screen and (max-width: 1402px) {
.wrapper {
background-size: cover;
}
}

Note: this is where testing will tell us if any of these changes work. This is the problem here where I am working from outside your WordPress site and cannot do the testing myself to see what needs doing and doing differently.

• This reply was modified 5 years, 4 months ago by mwarbinek. Reason: corrected info