Docs

[Andreas Bjerve]

Hi,

My transparent navbar reveals a grey background with a small menu – I want it to be white. So I solved that by putting a negative value to the topmost section so as to “overlap” the navbar, making its background white. Is that a viable approach or is there any other solution?

Thanks!

[Andreas Bjerve]

This reply has been marked as private.

[Friech]

Hi There,

Thanks for writing in! I still see a small portion of grey background above the header. If you need the header to have a white background on mobile, please use this CSS instead.

@media (max-width:  979px) {
	.x-navbar {
		  background-color: #fff !important;
	}
}

Remove the negative margin you applied on the first section.

Hope it helps, Cheers!

[Andreas Bjerve]

Hi, thanks for pointing that out! I just now noticed that my header image does not extend all the way to the top, why is that?
And why does those semi-colon symbols appear there?

(Also, is there a way to make the page behind the navbar white, without using my negative maring-value/padding-technique?)

Thanks

[Paul R]

Hi,

Can you provide us the exact url of the page where we can see the issue.

Thanks

[Andreas Bjerve]

Yes. Here: http://www.andreasbjerve.com/

[Andreas Bjerve]

…but really it´s present on all my pages.

[Nico]

Hi There,

Usually, the semicolon is an excess code in your Customizer. Please review your codes in your Customizer or your customization in your child theme.

And for the other question, not quite sure of what are you trying to achieve. Would you mind sharing us more details on it. Perhaps a screenshot with guide or mark would help.

Let us know how it goes.

Thanks.

[Andreas Bjerve]

Hi, thanks, but sadly I´m somewhat dyslectic when it comes to code 😛

Could you be so kind as to have a look at my CSS? It´s not much – perhaps you can see the error?

.x-navbar .x-nav-wrap .x-nav > li > a {
font-size: 16px;
padding-top: 42px;
}
.x-colophon .widget {
text-shadow: none;
}
.x-colophon .h-widget {
color: #909090;
}
.x-colophon.bottom .x-social-global a {
color: #CDCDCD !important;
font-size: 19px;
}
.x-colophon.bottom .x-social-global a:hover {
color: #EEEEEE !important;
}
.x-colophon.bottom .x-nav li a {
color: #CDCDCD;
}
.x-colophon.bottom .x-nav li a:hover {
color: #EEEEEE;
}
.x-colophon.bottom .x-social-global {
margin: 30px 0 30px; /* You can adjust the 30px and 10px values each are for the top and bottom margin */
}
.x-colophon.bottom .x-nav li {
margin: 0 3em; /**Default is 0.05em**/
}
.x-colophon .x-nav li a {
font-size: 13px;
}
.x-navbar .desktop .x-nav > li > a, .x-navbar .x-brand, .x-navbar .x-navbar-inner {
-webkit-transition: height 2s, padding-top 2s;
transition: height 2s, padding-top 2s;
}
.x-navbar .desktop .x-nav > li > a, .x-navbar .x-brand, .x-navbar .x-brand img {
-webkit-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.x-navbar.x-navbar-fixed-top .x-brand img {
font-size: 19px;
width: 60px;
}

.x-navbar.x-navbar-fixed-top .desktop .x-nav > li > a {
height: 60px;
padding-top: 25px;
}
.x-navbar.x-navbar-fixed-top .x-navbar-inner {
min-height: 60px;
}

footer.x-colophon.top div#text-3 {
text-align: center !important;
}
.x-nav-wrap.desktop li a:hover {
box-shadow: inset 0 3px 0 0 #7F7F7F !important;
}
.x-navbar.x-navbar-fixed-top .x-brand.img {
margin-top: 3px;
}
.x-navbar.x-navbar-fixed-top .x-nav-wrap .x-nav > li > a {
padding-top:38px;
}
/*contact*/
.x-navbar .desktop .x-nav > .current-menu-item.menu-item-168 > a {box-shadow: inset 0 4px 0 0 #7F7F7F;}
/*blog*/
.x-navbar .desktop .x-nav > .current-menu-item.menu-item-167 > a {box-shadow: inset 0 4px 0 0 #7F7F7F;}
/*about*/
.x-navbar .desktop .x-nav > .current-menu-item.menu-item-166 > a {box-shadow: inset 0 4px 0 0 #7F7F7F;}
.x-navbar .desktop .x-nav > .current-menu-item.menu-item-2986 > a {box-shadow: inset 0 4px 0 0 #7F7F7F;}
.x-map {
margin-bottom: 0;
}
.x-img {
margin-bottom: -1px;
}
.x-navbar {
background-color: rgba(232,232,232,0.2) !important;
border: 0;
}
.x-logobar{
background-color: transparent !important;
}
a.manual-optin-trigger.x-btn.x-btn-blue-green.x-btn-flat.x-btn-rounded.x-btn-regular {
width: 36%;
font-size: 28px;
}
a.x-btn {text-decoration: none !important;}
@media (max-width: 979px) {
.x-navbar {
background-color: #fff !important;
}
}

[Christian]

Please check your code in http://csslint.net/ and click the lint button and it will spot the errors for you.

Thanks.

[Andreas Bjerve]

I removed all CSS to check, yet the problem persists. Could it be related to my revolution slider?

[Jade]

Hi Andreas,

You could try testing for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

Let us know how it goes.

[Andreas Bjerve]

Hi, sry for the late response. – Topic here is now: how to remove semi-colons that appear above mye header.

I´ve tested for plugins and by removing all custom css, yet those semi-colons still appear at the very top of all my pages.

You can see it here:
(https://s3.amazonaws.com/community-themeco/app/uploads/2017/01/24043143/header2.jpg)

Any idea what may be the cause?

[Andreas Bjerve]

This reply has been marked as private.

[Thai]

Hi There,

Everything should be fine now.

I removed them under functions.php file.

The correct code should be:

add_action( 'wp_head', 'add_custom_script' );
function add_custom_script(){
	?>
		<div id="fb-root"></div>
<script>(function(d, s, id) {; var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/nb_NO/sdk.js#xfbml=1&version=v2.8"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script>
	<?php
}

Cheers!!!!

[Author]

Posts