Header/topbar/Menu

[Christensen]

Hey at the moment i’m making a english version of my side, and everything works fine except my menu/topbar looks wired in some o the pages, in my english version.
What can i do to fix this? i want it to be transparent, as in the danish picture.

www. annelene.net

[christopher]

Hi Annelene,

I wonder which plugin you use for the multi-lingual feature. X theme supports only WPML plugin.

If you use WPML plugin, you need to go to your WordPress dashboard and select the English language at the top section of the admin screen. Then you need to go to the settings of a plugin that you used to add Custom CSS code. It should be somewhere like WordPress Dashboard > Appearance > Custom CSS. I am not sure which plugin you used.

Then search for the CSS code below and remove the code which adds the white background:

.x-navbar {
    background-color: rgba(0,0,0,0.05) !important;
    position: absolute;
    width: 100%;
}

Remove background-color: rgba(0,0,0,0.05) !important; line.

Please kindly note that the plugin that you used and the customization is not part of our theme and the support and you will need to implement the fix yourself.

kindly get back to us with the result of the steps above and URL/User/Pass of your WordPress dashboard using the Secure Note functionality of the post to follow up the case if you still have problems.

Thank you.

[Christensen]

Hej
I don’t use a plugin i simply just translated and copied everything my self. I tried to find the code that added the white background, but nothing happened when i tried to delete some of the codes.

I coded the topbar look myself, so i’m not sure how i works now

[friech]

Hi Annelene,

Who provided you this custom CSS? https://annelene.net/?custom-css=d5c66dfa5f please do mind that we can not really provide support for this customization.

First of, there are 2 errors on that Custom CSS (you can check that here) you need to address those errors or else some of your custom CSS block will not take effect.

You have this custom CSS to apply the transparent-header-above-the-video on the home page, right?

.home .x-navbar {
    background-color: rgba(0,0,0,0.05) !important;
    position: absolute;
    width: 100%;
}

You need to apply that same CSS to the English page if you want that same effect on the English page. And you should not target the .x-navbar, but instead the entire header.masthead

You can find the proper CSS code selector using the Chrome browser Developer Toolbar
For the CSS code itself, I suggest that you get started with this tutorial

I don’t see topbar on your pages, I only see the Navbar (with the logo and navigation), please clarify.

Thanks,

[Christensen]

Hey! I tried these thing you suggested, and sadly no luck.
I coded it my selv, i have just been googling around to find the result. I’m okay that you can help me with this.
I think the problem is the i have my primary menu i the danish version, and then i have another menu for the english pages, so in some way the code doesn’t work for that menu.

but I will go look at the videos.

I ment navbar, and not topbar

[ruenel]

Hello Annelene,

The Danish homepage has this custom css file being loaded and it has this content:

/*
Du kan tilføje din egen CSS her.

Klik på hjælp-ikonet ovenfor for at lære mere.
*/

.x-logobar {
	display:none;
}

.x-navbar {

transform: translate3d(0, 0, 0);
background: none;
box-shadow: none;
border-bottom: none;
}

.home .x-navbar {
    background-color: rgba(0,0,0,0.05) !important;
    position: absolute;
    width: 100%;
}
.home .x-navbar .x-nav-wrap .x-nav > li > a {
    color: #fff;
}

.x-navbar {
    background-color: rgba(0,0,0,0.05) !important;
    position: absolute;
    width: 100%;
}
.x-navbar .x-nav-wrap .x-nav > li > a {
    color: #fff;
}

 .widget {
font-size: 16px;
}

.sub-menu { background-color: rgba(0,0,0,0.90) !important; }

.sub-menu a { color: white !important; }


.x-navbar .sub-menu a{
font-size:13px;
}


.x-colophon.bottom .x-colophon-content {
    font-size: 14px;
}


.site-footer {
  background: orange;
}


#footer1{
margin-left:2%;
float:left;

}
#footer2{
margin-right:2%;
float:right;
}

.sf-menu li:hover ul, .sf-menu li.sfHover ul {
right: auto;
left: -92%;
}

.x-navbar .sub-menu { top: 80px !important }

.x-nav-wrap.mobile.collapse.in {
display: block;
background-color: rgba(white);
padding-left: 20px;
}

@media (max-width: 979px) {
body .x-navbar {
height:auto !important;
}
.x-navbar-inner {
background-color:rgba(0,0,0,0.90);
}
}

.x-navbar .mobile .x-nav ul li a span {
color: #000;
}
.x-navbar .mobile .x-nav ul li a {
border-color: #000;
}

.desktop #menu-item-928 .sub-menu {
    max-width: 50%;
    min-width: 210px;
    left: 0;
	  
}
.desktop #menu-item-928 .sub-menu > li {
    display: inline-block;
    width: 200px;
    float: center;
}



.x-colophon.bottom a {
    color: #404040   ;
}

.x-colophon.bottom a:hover {
    color:black;
}


.x-colophon.bottom .x-social-global a {
    font-size: 25px;
    height: 40px;
    line-height: 40px;
    width: 40px;
}

#mobile-menu .dropdown-menu {
    background-color: white;
}

.x-navbar .mobile .x-nav ul li a span {
    color: #FFF;
}

.x-navbar .mobile .x-nav ul li a {
    border-color: #FFF;
}


#reply-title {
font-size: 19px !important
}

.single-post .site > .x-container.offset {
padding-top: 40px;
}

.single-post .x-container.max.width.offset {
max-width: 100%;
width: 100%;
}

article.comment {background-color: grey; box-shadow: none;}

article.comment p {color: white;}

.x-comment-author {color: white;}

.x-comment-time {color: white;}

When you check the English homepage, the file is missing and this is why you are having this issue. I would recommend that you transfer custom css code in in the Theme Option Custom CSS instead, X > Theme Options > Global CSS (http://prntscr.com/evui3r).

And if nothing is helping, provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WordPress Admin username / password
​
To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288

Regards.

[Christensen]

Ahhh man! I figured it out!
The problem is not the header/menu, it is that the background pictures is not under the transparent menu, so i have a gap?
That is very wired! - Does that makes sense?

[Christensen]

I know the problem now!

it it because on my english pages I have chosen: One page navigation to english menu instead of deactivated, and then i changes.

[christian]

Hey Annelene,

We’re glad that you’ve figured out the cause of the problem and sorted it out.

[Christensen]

Thanks for the help anyway

[ruenel]

You are most welcome!