[leomrusParticipant]

Hello,

1. I want to make my header transparent and fix navbar. When I scroll it some backgrounds on my pages are dark and my visitors can not see navbar.

I have found CSS example, how it can be done, but I can not made two versions of navbar items.

2. In my Topbar I have some information and Social buttons. I want to make it more useful in desktop and mobile version.

I want to delete email address from topbar and after that in Desktop version: link with telephone number on left side, language chouse in center and Social bar on right.
In mobile version all should be center align by width and some padding between items.

Could you help me?

Thank you for your help in advance!

[leomrusParticipant]

This reply has been marked as private.

[John EzraMember]

Hi there,

Thanks for writing in!

For the nave bar color on scroll. You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

/* before scroll */
body .x-navbar a{
     color: #ffffff!important;
}

/* after scroll */
body .x-navbar-fixed-top a{
     color: #000000!important;
}

For the second request.

Replace your topbar content with the following:

Appearance > Customize > Header > Miscellaneous > Topbar Content Replace with the following:

</p><div class="tbmod">
	<div class="tbl">
		<font size="5"><strong><a href="tel:+74957604830">8 495 7604830</a></strong></font> <br>
	</div>
	<div class="tbm">
		<a href="http://www.cubiculum.ru"><img class="iclflag" src="http://cubiculum.ru/wp-content/uploads/2014/07/ru_flag_128.png" width="18" height="12" alt="Russian (Русский)" title="Russian (Русский)">Русский</a> | <a href="http://www.cubiculum.ru/en/"><img class="iclflag" src="http://cubiculum.ru/wp-content/uploads/2014/07/uk_flag_128.png" width="18" height="12" alt="English (English)" title="English (English)">English</a>
	</div>
</div><p style="display:none">

Note: Divs can’t be contained in <p> elements so we are closing the p.p-info tag with the first closing </p> tag. Then we are opening the originally created closing one from the p.p-info with a display none style so it doesn’t add a line of spacing. The above code also adds classes so we can control the styling with CSS.

After you have that setup, you can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

.tbm, .tbl {
    width:33%;
    display:inline-block;
}

.tbm {
text-align:center
}

.tbmod {
    display: inline;
}

.x-social-global {
    width: 33%;
    text-align:right;
}

Hope this helps – thanks!

[LelyModerator]

Hi There,

Thank you for the link.
1.) Did you figure out this already? When I checked your site, navbar is now fixed and then the background color with opacity make it’s visible when we scroll down. Please confirm.

2.) Go to Appearance > Customize >Header > Topbar Content: Remove the HTML code for the email address. Then wrap the language image with span tag as holder so we can use this in CSS. Like this:
<span id="topbar-lang" ><a href="http://www.cubiculum.ru"><img class="iclflag" src="http://cubiculum.ru/wp-content/uploads/2014/07/ru_flag_128.png" width="18" height="12" alt="Russian (Русский)" title="Russian (Русский)">Русский</a> | <a href="http://www.cubiculum.ru/en/"><img class="iclflag" src="http://cubiculum.ru/wp-content/uploads/2014/07/uk_flag_128.png" width="18" height="12" alt="English (English)" title="English (English)">English</a> </span>
Then add the following CSS to make it center:

#topbar-lang{
    position: absolute;
    top: 41%;
    display: block;
    width: 100%;
    text-align: center;
}
.x-topbar-inner{
    position: relative;
}
.x-topbar .x-social-global {
    margin-top: 6px; /*To align social icons vertically*/
}
@media (max-width: 767px){
.x-topbar .x-social-global {
    margin-top: 40px;
}
}

Also remove all <br> code from topbar content. That would cause unnecessary vertical space.

Hope this helps.

[leomrusParticipant]

This reply has been marked as private.

[Rue NelModerator]

Hello Again,

For your navbar menu item color change when the user scrolls, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

/* before scroll */
body .x-navbar a{
     color: #ffffff!important;
}

/* after scroll */
body .x-navbar-fixed-top a{
     color: #000000!important;
}

Please let us know if this works out for you.

[leomrusParticipant]

Hello!

Yes, I made it, but on pages with dark background it locks bad.

I want to make color change dynamic based on background like in my examples not only scroll base for fixed and not fixed menu.

[RadModerator]

Hi there,

Not sure if that’s possible as there is no way to detect if a background is dark or light using just CSS. May need libraries such as these http://www.sitepoint.com/4-detect-darklight-background-jquery-plugins/, but we can’t do that, it’s a different level of customisation we can’t handle.

Or am I understanding it incorrectly? Would you mind providing more information?

Thanks.

[Author]

Posts