[FinlandoParticipant]

Dear Staff,

It would be nice to implement a background image for the whole header with the help of this topic:
https://community.theme.co/forums/topic/adding-a-background-image-to-masthead-stacked/

Which size would You recommend for the image?

Cheers!

[FinlandoParticipant]

This reply has been marked as private.

[FinlandoParticipant]

PS: I want the image to stay responsive and keep the whole composition (without cropping) while resizing the browser or viewing on other screen resolutions. Is that possible?

[ZeshanMember]

Hi Finlando,

Thanks for writing in!

The ideal size for fullwidth image is 1600px. If you want to show the complete background image, you will need to use background-size: contain CSS property. For example, adding this code along with the code from other thread:

.masthead.masthead-stacked {
   background-size: contain;
}

However, it may leave some blank areas on the sides of the image depending on its size.

Thank you!

[FinlandoParticipant]

Thanks a lot for the advice. I hope You can point me to a solution for the border of the header…

How can create a border-bottom for the whole navbar without affecting the current menu item (which is allready set to border-buttom: none;)? It should look like this:
http://snag.gy/UpuXq.jpg

When I add a border to .masthead.masthead-stacked or .x-navbar i get this result:
http://snag.gy/xVTVh.jpg

Thank You very much for the great support.

Cheers!

[JackKeymaster]

Hi there!

Hope you’re well today, try adding the following under “customize > custom > css”.

.x-navbar .x-nav > li > a {
	border-bottom: none !important;
}

.x-navbar {
	border-bottom: 2px solid #000000 !important;
}

Thank you! 🙂

[FinlandoParticipant]

Hi!

Thanks a lot. Hope You’re well too. I would feel much better without the border for the current menu item 🙂

Maybe the reason is my css..:

.x-navbar .x-nav > li > a {
	border-bottom: none !important;
}
.x-navbar {
	background-color: #eee;
	border-bottom: 1px solid #ccc !important;
}

.x-navbar .x-nav > li > a:hover {
	border: 1px solid #ddd ;
	border-bottom: none;
	background-color: #ddd;
	color: #888 !important;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
}
.x-navbar .x-nav > .current-menu-item > a, .x-navbar .x-nav > .current-menu-item > a:hover {
	background-color: #fefefe;
	border: 1px solid #ccc;
	border-bottom: none !important;
	color: #888 !important;
	font-size: 10px;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
}
.menu-item-30 a, .menu-item-27 a, .menu-item-26 a, .menu-item-25 a, .menu-item-24 a, .menu-item-23 a, .menu-item-29 a, .menu-item-28 a {
	border: 1px solid #eee;
	border-bottom: none;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
}

Cheers!

[JackKeymaster]

Hi there @finlando,

Thanks for the additional information. Did that code not work? It’s working for me in firebug.

Would you mind providing some WP admin login details in a private reply please so I can take a closer look at this for you? 🙂

Thank you!

[FinlandoParticipant]

Hello,

Thank You. I would appreciate that.

Cheers!

[FinlandoParticipant]

This reply has been marked as private.

[Nabeel AModerator]

Hi again,

I tried the login credentials couple of times but they are not working. Can you please confirm if they are correct? Please copy and paste your CSS from Customizer to your Child theme’s style.css file. There are too many CSS rules defined in your Customizer and it’s loading completely that could be the reason why the above CSS is not working for you.

Let us know how this goes. Thanks!

[FinlandoParticipant]

Hi,

Moving the css from customizer to child theme’s style.css was not effective. The code You suggested removes the bottom border, but this border is inside the menu “tab”. There is still the border of the whole navbar crossing the menu item.

An other question… How does it come, that the navbar custom styles break? (when moving the css from customizer)

Thanks a lot in advance.

Cheers!

[RadModerator]

Hi there,

Add this css too 🙂

.x-navbar .x-nav-wrap.desktop .x-nav > .current-menu-item > a, .x-navbar .x-nav-wrap.desktop .x-nav > .current-menu-item > a:hover {
    padding-bottom: 9px !important;
    position: relative;
    bottom: -1px;
}

This should do it, will simply create a -1 overlap for the active menu that has no border.

About child theme’s style.css, it could be cache. Or your styling is being overriden somewhere else. Please add !important on each style value if your think your styling isn’t working due to css priority (eg. color: #000 !important; ) .

Thanks!

[FinlandoParticipant]

Thanks a lot for the solution and the clarification regarding the custom css.

The css You provided is working, but there is a 1px gap above the current menu item when scrolling down. (when the menu is fixed at the very top) Would be nice to have a cleaner solution, if possible.

Thanks a lot for Your help.

Cheers!

[Rue NelModerator]

Hello Finlando,

You’re welcome! We are just glad we were able to help you out.
Thanks for letting us know that it has worked for you.

The 1 px is because of the bottom: -1px. Try making it to zero and compare the result.

All the best.

[Author]

Posts