Docs

[ahurlburt53]

website: http://tampaflooringgallery.com/

screen shot
http://i.imgur.com/sqKBSwR.jpg

Want the navbar menu right below logo

my css

.home .x-logobar {
position: absolute;
width: 100%;
top: 46px;
background: transparent;
border-bottom: 0;
}

.home .x-navbar {
float:left;
width: 80%;
margin-left: 10%;

top: 101px;
text-align: center;
background: rgba(255,255,255,0.8);
}

.home .x-navbar.x-navbar-fixed-top {
position:fixed !important;
top:0;
width: 100%;
margin-left: 0px !important;
}
.home .x-topbar {
background: none;
border-bottom: 0
}
@media (min-width: 980px) {
.rev_slider_wrapper, a.x-img-thumbnail:hover, .x-slider-container.below, .page-template-template-blank-3-php .x-slider-container.above, .page-template-template-blank-6-php .x-slider-container.above {

margin-top: -140px;
}}

[Rupok]

Hi there,

Thanks for writing in! You can add this under Custom > CSS in the Customizer.

.x-navbar-wrap {
  position: absolute;
  top: 110px;
  left: 0;
  right: 0;
}

Let’s re-position the text layers to keep gap where logo is placed.

Cheers!

[ahurlburt53]

I got everything looking ok except for mobile. Ay suggestions. The logo is in the way. Any suggestions http://i.imgur.com/R7aW9Ej.png

[Christopher]

Hi there,

I think adding logo as slider layer would be better solution.
You can also update your code to change the layout only for large screens :

@media (min-width:979px){
.x-navbar-wrap {
  position: absolute;
  top: 110px;
  left: 0;
  right: 0;
}
}

Hope it helps.

[ahurlburt53]

all im trying to do is improve the way the header menu navbar works with X. In addition to revolution slider and the other pages. The headers is my biggest problem and navbar menus. They never display correctly. If you have some suggestion please advise. I want a transparent menu that looks good with current setup

[ahurlburt53]

http://avada.theme-fusion.com/header-transparent/

[Joao]

Hi There,

Please remove the following code to Appereance Customizer Custom CSS

.x-navbar, .x-navbar .sub-menu {
background-color: rgb(9,185,242) !important;
}

Add the following code to Appereance Customizer Custom CSS:

 .x-navbar-wrap {
     height: auto !important;
}

 .x-navbar {
     background-color:transparent;
     border:0;
     box-shadow:none;
     position: fixed;
     width:100%;
}

 .x-navbar-solid {
     background-color: rgb(9,185,242);
}

Add the following code to Appereance Customizer Custom Javascript:

jQuery(function($) {
    $(window).scroll(function(){ 
        if($(window).scrollTop() >50) {
              $('.x-navbar').addClass("x-navbar-solid");
        }else {
              $('.x-navbar').removeClass("x-navbar-solid");
        }
    });
});

Hope that helps

Joao

[ahurlburt53]

I added new code, did you want me to remove old code, then add the new code you just provided?

[ahurlburt53]

the code you provided seems to have issues

[Rupok]

Hi there,

Unfortunately I can’t see the code on your site. Kindly follow the last reply carefully and make sure to add the CSS and JavaScript separately.

Thanks

[ahurlburt53]

I did that nothing happens. Also the java script displays at bottom of site

[Joao]

Hi There,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks

Joao

[Author]

Posts