Transparent taskbar

When you add the mobile CSS for the image, you need to change it to the smaller image I uploaded. It won’t look good otherwise.

and…

remove the Elementor overlay, you forgot to do that.

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

I was getting really tired earlier and needed rest.

Here is the fix for your mobile screen header image, the large header image you are currently using.

Using the previous CSS, change the background-size to following,

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

The above fix works well and looks just fine.

There is no way to have the header image show the exact same way as Desktop because in Mobile screens there is only so much room.

Hello, I was trying to use the info in this thread on my website that I am just setting up https://www.matilde.design but it’s not looking good and I was wondering if someone could kindly help me trying fixing it too.

This is the css code I tried adding.

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

/*Top Wrapper Block*/
.wrapper::before {
content: ”;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0,0,0,0.1);
}
.wrapper {
background: transparent url(‘https://www.matilde.design/wp-content/uploads/2019/02/HomeWPweb.jpg’) no-repeat 0 0;
background-size: 100%;
}
.header {
background-color: transparent !important;
}
/*Top Nav Bar*/
.nv-top-bar {
background-color: rgba(255,255,255,0) !important;
}
.nv-navbar {
border-bottom: 0px solid #F0F0F0 !important;
background-color: rgba(255,255,255,0) !important;
}

/*Mobile Fix-Menu Toggle Button*/
@media screen and (max-width: 1402px) {
.navbar-toggle-wrapper {
flex-wrap: wrap;
}
}

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

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

But the header image background looks odd as it doesn’t blend with the one of the homepage.
Also I have a problem with the image appearing in all of the other pages and since @mwarbinek says “The only way to change the way the other pages look is to go into the PHP files that make up the theme and find where the coding exists that builds the other pages and insert new HTML coding. This is a lot more work and not guaranteed to work well because it depends on how the theme was coded and also requires you then create a child theme to avoid updates changing it all back” I was wondering if maybe there’s a way to try changing the position of the header.
This one I am working on is a child theme but I don’t know the html file that I have to edit.
I would like to show you these 2 pics:
Here is where it is by default https://www.matilde.design/wp-content/uploads/2019/02/1.png .
Here https://www.matilde.design/wp-content/uploads/2019/02/2.png I tried to put it inside the section data-id=”6bea8fc8″ just above div class=”elementor-background-overlay”.
Then setting the header to transparent and adjusting the navbar margins to bring it on top of the page.
But how to do this in the css files? Is this even right?
I would love to make the header on top of the image like this https://www.matilde.design/wp-content/uploads/2019/02/3.png .
And I am hoping someone could help.
Thanks

• This reply was modified 5 years, 9 months ago by mati.

@matildedesign

Custom CSS – Important to Understand
Custom CSS from one website is not usable on another website for different theme. The selectors may be wrong, the settings wrong, etc, because Custom CSS is site/theme specific and not transferrable.

How to Locate the Correct CSS selectors to Customize
Most browsers have developer modes activated by hitting the F12 key. To locate the exact CSS selector or selectors, you put the cursor on the element while viewing it in the browser, right click and choose “Inspect element”, or words like it. The developer mode activates & shows the HTML source code for that element.

Sometimes you have to highlight the element with the cursor and then right click it to locate the HTML source code. Yet, at times you really have to dig for the information and try to locate the HTML/CSS selector.

The developer mode window is usually split in 2, left side the HTML source code and the right side the CSS. You can modify the right side CSS to see the effect in the browser. If the modification works, that is the CSS selector to address in the Custom CSS.

(Note, in the developer window, changes are only temporary and all reverts back when the browser closes or gets refreshed)

Custom CSS and Page Builders
Avoid using Custom CSS when building a page with a page builder like Elementor, or WPBakery, etc. Reason is page builders already provide customizations for any specific element inside the page builder interface. Especially Elementor, provides a means to adjust the positioning, color etc., of any element you insert using Elementor.

Always learn to use the page builder to the best way you can work it BEFORE using any Custom CSS.

What to do now?
Go back and “cut” out (remove) the custom CSS you wrote for that page, save it in a text file for possible use, and go back to page you have trouble with and fix it using Elementor.

Reason is, removing the custom CSS returns your page to the state it is truly in, as created by Elementor. From there you can work to resolve your layout issues using Elementor.

I say this because I have used Elementor on client websites because their theme required it. I have not needed to insert Custom CSS for any page created by Elementor.

When Custom CSS Applies
Any thing that a page builder did not create or has control over. This includes Elementor.

Custom CSS then applies to elements and layout issues that the theme CSS failed to address and custom CSS is used to create a layout, which is added to the current theme, that the theme does not create itself.

Now here are some things you need address on your website, referring to your home page.

Main Menu
The sub-menu items need to have the correct text color, they are currently invisible because they are the same color (white) as the white background.

Header Title Text
These two, “Receive on time” and “Satisfaction guaranteed”, are misaligned from the first title, or the first one “Fixed price projects” is misaligned from the other two.

To fix this, do not use Custom CSS, go back to the page and fix it in Elementor since that page was created by Elementor.

“About Us” slide in panel
It took too long to slide in when I scrolled the page. In Elementor, change the animation timing effect and make it “sooner” (not faster) to slide in.

This section for the About us has too much white space. Find something to include here for a more balanced look content wise.

Reduce the slide in effects
Way too many sections use this effect. I suggest to change some to be static (no effects), such as every 3rd one use that effect.

Always use animation sparely and wisely and go for a balanced page. Valued content is what people go for, not the special effects.

Work on all that above and see what you can get.

@mwarbinek

Thank you very much for your detailed help and your time. It was nice of you.

However, maybe I think I didn’t explain what I meant….

What you saw it was just the child theme of Neve as it comes by default (that’s how it came when theme was installed. Even the sliding effects and timing. That’s all by default settings). I didn’t customize it yet as I was just concentrated in the header and background image look.
I wasn’t concerned yet for the text in the menu and those other misaligned items or anything else in the theme, as I intend to change everything once I know if I can or cannot have the header the way I would like for it to look. But thank you very much for the info on the animation though, as it will be handy. And thank you also for the aesthetic suggestions on the overall look. I will make changes to the theme trying to achieve a bit more minimal look.

I had just added that css code that I learned from your explanation in the previous comments and with that I realized that is not working for me (and left it there just to show), as what I thought I need, it is to change the position of the header not just its look.
So I tried inspecting the theme from the browser (as you just explained) trying to achieve the results I was wishing for.
So I have in a text file the customized html code. I basically had modifed the <main id=”content” class=”neve-main” role=”main”> section of the theme. Moving the header inside the “elementor-section-wrap” (inside the section data-id=”6bea8fc8″ ) and making it transparent. Then changing the padding of the section data-id=”6bea8fc8″ from 300px to 0px and then the padding of the elementor-container elementor-column-gap-default from 0px to 300px.

But that’s on the browser… how do I change it in WordPress? I have html and those are php files.
So now, from the ftp in the folder of my child theme I tried creating a header.php file from the one of the original theme and put in that my html “main” section code below the
<body <?php body_class(); ?>>
<div class=”wrapper”>

????<?php do_action( ‘neve_before_primary’ ); ?>

and above the

<?php
do_action( ‘neve_after_primary_start’ );

Removing the old code that was just right in there.

Then tried to fix the transparency of the .nv-navbar from the file style.css .

But it doesn’t work… ??

The header was moved but it doesn’t look transparent and I don’t know where to locate those codes for the padding as I can’t find those items in the style.css file.
Then the menu isn’t working.
And if I load Elementor… it’s all messed up.

Before I go further with this, I need some information to establish where you are, so I will ask a few questions.

1. Does the theme require Elementor, by default, to provide the layout or layouts it had shown in its demos?
2. Have you been using Elementor or have you been avoiding Elementor, trying to customize your own way instead?

Also, this is important,
Since you said the current layout your trying to change came as a default layout, then is the header area created in Elementor or was it created using any Theme options?

Note:
I ask all this because of this statement you made,

Then changing the padding of the section data-id=”6bea8fc8″ from 300px to 0px and then the padding of the elementor-container elementor-column-gap-default from 0px to 300px.

Notice in the information you copied, it uses the word “elementor” and that tells me Elementor created the header or the page, so the questions above are to clarify important elements of what you want to achieve.

@mwarbinek Thanks again for the reply.
Yes the theme came with Elementor but Elementor won’t let me touch the header. In the customizer I do have the option to chose 3 styles for the aliment of the header items (logo and menu) but it basically looks the same (the white bar with the menu on top of the page image. Which I don’t like. As I would like instead for the menu and logo to go on the image)
I mean to use Elementor to change the rest of the template but for the header I think my only option is changing the files.

I placed the header inside the Elementor section now. That’s why the menu right now is in the middle of the page. And I thought of changing the paddings to fix it.

Does it make sense?

P.S.
I placed the header in the Elementor section by changing the php files.

I have installed the “Neve” theme into my localhost.

I see that the free theme version does not automatically install any demo/default layout, it is just a very basic WordPress layout. It appears you installed this demo: Neve Original, (Likely the paid version gives the same).

I had to do test this by installing the same Neve theme into my LocalHost, because I saw that you were not catching what I was saying about dealing with themes and page builders like Elementor.

A lot of themes now require the use of a page builder to get the same demo layouts they show. So by default, the layout you choose requires Elementor. To edit that layout requires Elementor.

I also see by my install, the header image you have, with the doll and beige color background is editable in Elementor. The menu/top bar is not, you have to go to customizer for that, Customizer > Header > (choose area to change).

(Note: The logo/menu area is the “top bar”, that is not the header. The header is the large doll image you have, with the elements in the middle.)

Now, as I said before, please ensure you have done the following,

• Remove all Custom CSS
• Remove any PHP files you added to the Child theme, leave only the required default files, “style.css”, “functions.php” and the “PNG screenshot”. (I am supposing there were no special files required for the child theme install, these are the default ones).
• Return the settings for the home page back to what was default for the demo you installed.

Once done, then I can give some help, because at this point, the changes you made created the issue, so remove all changes, return to default layout as per the demo and we can start from there.

You should see the following same demo layout at your site, as per the screenshot I provided here (except the logo & menu items are different for my screenshot),

https://prnt.sc/mplmsn

Yes, sorry I didn’t mention I had installed the demo …I had forgot about it.
Now I reinstalled the original child theme files.
My background image is there and the logo.
But the items aren’t aligned as they should be… (However, I won’t need them once I customize the theme). And maybe the menu doesn’t work smoothly..? (items appear on top of each other when clicking on the arrows of the drop down menus)
Thank you again for this help!

• This reply was modified 5 years, 9 months ago by mati. Reason: forgot to mention

Why I asked for a reset of your theme settings
It is because you made so many changes, all that would happen is running around changing your changes instead of the theme itself. It was best to remove all changes and start clean, that way we get better results using a proper focus on what needed change, which is what I have done below.

Top Bar/Menu
Color – Menu Area
In the free version of Neve, there is no means to customize the top bar, especially regarding color. Likely they want you to buy the theme to get that customization feature.

Link-Menu-Color Settings/Customizer
I tried the color settings in Customizer on my LocalHost copy and not one color change made a difference. Likely a bug in the theme. Try the menu link color options in Customizer > Colors & Background, see if it works for you.

If not, post a request for help in the Neve (free) Forum here at www.remarpro.com, make a new post of your own, do not post into someone else’s post string, and explain the problem that the theme cannot change the color of menu text, especially the hover color using the options in Customizer.

In the mean time, go next…

Menu Color Change / Custom CSS
In the free Neve, you need custom CSS to change the menu background & menu item colors. Here is how I changed it,

/*Main Nav Bar Bkgrd & Border Color*/
	.nv-navbar {
	background-color: #E3D6CB;
	border-bottom: 2px solid #946842;
	}
/*Main Nav-Submenu Bkgrd & Border Color*/
	#nv-primary-navigation .sub-menu li {
	background-color: #FFFFFF;
	border: 1px solid #946842;
	}
/*Main Nav Menu Text Hover Color*/
	#nv-primary-navigation a:hover, #nv-primary-navigation li:hover > a {
	color: #946842;
	}

(Note: you may have to add “!important” (no quotes) after the property values if the CSS above does not work. Adding “!important” will override the theme’s CSS for that selector and property values.

Example:
background-color: #FFFFFF !important;

)

Submenu Color
I included a border color for the border around the sub-menu items.

Menu Text Hover Color
Ensure the hover color makes the menu text distinct and not invisible.

I noticed you used a bulk copy of all the selectors for the hover color change in Customizer. That is not good, because the shot-gun method changes colors of a lot more elements that you likely do not need to change with Custom CSS.

When using Custom CSS, modify only what you need to change, even targeting the element(s) specifically and leave the other elements alone. This way you avert unexpected/unwanted results.

The above CSS selectors seem to be all you need for the hover color. This means you need to learn to read CSS and visualize what a selector name is doing and what elements it effects. The Custom CSS I wrote above, targets the main menu text and not other unrelated elements.

Menu Bkgrd Color vs Bkgrd Color-Header Doll Image
The color of the background image in the header (doll image), has a gradient to it, so you would have to choose the base color for the menu background. I would suggest to create a contrast between the menu and the header color to make the distinction.

Either make the menu background color different, or make the bottom border a different color, as I have done above.

See the screenshot of my (temp) changes to you site.

https://prnt.sc/mq0fyn

Position of the Menu
There are settings for the menu position, only 2 positions are shown in “Customizer > Header > Primary Navigation“.

Essentially, positioning of the menu, as the theme provides, is good, but what did you want to do with it?

Your original post above is not detailed enough to explain what you want to change regarding the menu, but having said that, it is important to note the following:

This theme sets the menu where it is, that is how everything is structured, even in the PHP theme files. The paid version of this theme may have more options, so if those options are appealing, I suggest to get the paid version.

Otherwise, to move the menu elsewhere than the design of the theme is likely to break the theme because you are essentially re-writing the theme and a lot more PHP coding than you need to involve yourself with. If the menu position is what you want different, then I suggest to seek another theme that better fits your needs for a website.

Menu Functioning / Browsers
The menu works differently in Microsoft Edge.

Unfortunately, Microsoft has not learned after more than a decade of making browsers and seeing the competition. They still make Internet browsers with a backward mentality.

All other major browsers, Chrome, FireFox and Opera work the same for the menu and sub-menus on your website, it is only Edge that makes things different.

Edge requires a person to click the menu item to open/close the sub-menu, where the other browsers requires only a cursor hover, which is the design of the menu.

There is not much anyone can do about the Edge issue for now. If some people insist on using Edge for their web browsing, they will be generally disappointed because of Edge, not the website.

To change how things happen in Edge, requires more work, likely scripts installed on your site, but that also requires research to why Edge works the way it does with the menu and that should be left for another time.

Header Bkgrd Image Positioning
This is done in Elementor, since that controls the page layout below the top bar menu.

Open the home page in Elementor. Looking at the background image, in an area with no elements (near the top left corner seems to be free), right click and then click “edit section”.

At the left the element module opens, click the “Style” tab. It shows the background image. Below that the “Position” options. Choose the one that works best. The “Attachment” options provide a Fixed position (scrolls over the bkgrd).

For the “Repeat” option, choose “no-repeat”. In very large screens, you don’t want the background to repeat because the image was not wide enough.

For the “Size” option, choose “cover“. This ensures the background fills the space, no matter the size of the screen.

Under “Style” tab, “Background-Overlay“, this provides a color overlay, over the background image and by default for the demo you installed, the overlay color is black with the Opacity of “.85”. You can adjust this as you want or remove the color all together.

If you want to remove the color overlay, click “Colour” and click “Clear“. — or change opacity to zero (0).

Note: if this is where you inserted your Doll background image, remove it from here and place it under the “Background” instead.

Changing position even More for Background Images
Elementor does provide for a custom CSS selector name you can assign to it, which is far better, but you need to purchase Elementor to get that feature.

Otherwise the Custom CSS will be,

.elementor-91 .elementor-element.elementor-element-6bea8fc8 {
background-position: center;
}

Comment
If this is a free version of Neve you are currently using, consider getting a paid version of a theme rather than trying to go free. Paid versions give more options, you get support from the theme author and it is a better way to go, especially with any limited skills in website development (HTML/CSS/SCRIPT/PHP).

I would suggest to contact the theme developers and ask pre-sales questions about the paid version, let them tell you what your options are. If unsatisfied with their answers, seek another theme and make inquires there, based on your experience with this Neve theme.

Hope it works out for you.

I know you meant for me to reset the theme. But that’s how it stays. I don’t know why it doesn’t reset. Whenever I change theme (I tried with other ones) the logo and the background image always stay. And sometimes not all of the items of the theme are uploaded (as you see in this).

The menu link color options in Customizer > Colors & Background, works for me but the nv-navbar section doesn’t have an overlay.

This is what I added:

/*Main Nav Bar Bkgrd & Border Color*/
.nv-navbar {
background: transparent url(‘https://www.matilde.design/wp-content/uploads/2019/02/HomeWPweb.jpg&#8217;) !important;
background-size: cover !important;
border-bottom: 0px;
}

However, I guess it’s better if I look for another theme like you suggested…

Thanks so much again for all of your help and advices. It’s been very nice of you.

• This reply was modified 5 years, 9 months ago by mati.
• This reply was modified 5 years, 9 months ago by mati.

Overlay
When I spoke of overlay,I refer to the overlay created by Elementor, which applies to only the header area where the doll image sits. The overlay I referred to does not apply to the Logo & menu area.

/*Main Nav Bar Bkgrd & Border Color*/
Why did you use Custom CSS to insert the doll image?

There is no need to do that because the Custom CSS I gave works well without inserting another background image over and above what the Elementor inserts, as this now complicates things.

The problem now is if you use a background image using Elementor, maybe even the same doll image, you have duplicated the background image unnecessarily. In addition, now you will end up doing extra work to align the Nav Bar background image both for desktop and mobile.

Remember what I said when to use Custom CSS? – only when the theme does not provide the options/settings and layout on its own and then use CSS for only what is needed?

It is up to you what you choose to do, but here is what I strongly suggest.

• Resize the doll image to the width of 2600px, letting the height to automatically resize accordingly in an image editor like Photoshop,
• Replace the uploaded doll image with the resized one,
• Remove the demo header background image in Elementor for the home page as described above in my post,
• Replace that background image, in Elementor, with the doll image you resized and uploaded,
• Remove the Custom CSS you created that inserted the doll background image, go with the Custom CSS as I gave you,
• Use Elementor or Customizer settings to make adjustments to the layout color etc.
• If those settings in Elementor or Customizer are inadequate, then use Custom CSS for anything extra, but not to replace what you can do in Elementor or the Customizer.

Note:
In the custom CSS I gave, you can remove the following,

/*Bkgrd Image-Header*/
.elementor-91 .elementor-element.elementor-element-6bea8fc8 {
background-position: center;
}

Use Elementor to center or adjust the background doll image. The settings are there.

Please note:
Using Elementor to insert the background image into the header area is best because Elementor will then work to make it mobile friendly. You can also make adjustments in Elementor for any element for mobile settings.

Neve Child Theme Settings
Neve updated their documentation for a Neve Child theme.

I posted a request for clarification about their child theme settings and they created a documentation page specifically for that.

Anyone using a Neve Child theme should go to that document page, download the ZIP package, follow the instructions on that page to properly setup the Neve Child theme. Especially anyone who already created a Neve Child theme setup.

Neve Child Theme Documentation:
https://docs.themeisle.com/article/985-how-to-create-a-child-theme-for-nevehttps://docs.themeisle.com/article/985-how-to-create-a-child-theme-for-neve

The css you gave me is to set a solid color with a border. And it doesn’t solve my problem as I just wanted a different thing. (That’s why I was trying to put the image as the background of the navbar).
But I guess I just can’t achieve that…

So for now I will try another theme (Orfeo). Otherwise maybe I’ll be back with Neve and the css you gave me.

I meant to buy a theme, but before spending too much money on this website I need to see if I just can manage it (I already have headaches with my cache plugin that keeps breaking and I am afraid of woocommerce too).

Thanks again very very much for everything.