Docs

[isa1978]

hey guys!
I Hope you are well.

I need to ask you a huge favour if you can…

I would like to have my header (http://www.boundlessroads.com)
like this one http://www.agipsyinthekitchen.com/

it’s pretty much similar but I would need the following changes:

1) a costumized menu on the fixed top bar in the opposite side of the social media widgets
2) the logo bar transparent and overlapping the slider

do you think you can help me?

thank you so much in advance
cheers:)

[Joao]

Hi There,

Please add the following code to Appereance > Customizer > Custom > CSS

@media(min-width: 980px) {
.home .masthead  {
            position:absolute;
            width:100%;
            background-color:transparent !important;
     
       }
       body.x-navbar-fixed-top-active .x-navbar-wrap {
            height: auto;
       }
.home .x-logobar,.home  .x-navbar, .home .x-topbar  {
    background-color: transparent !important;
    box-shadow: none;
    border: 0;
  
}
  }

.x-navbar .desktop .x-nav>li>a {
    border-right: 0px ;
 
}

Hope it helps

Joao

[isa1978]

yessss!!! I love it !
you are awesome!! thank you so much!!

a couple of more things though, if you don’t mind 🙂

1)is it possible to have the same configuration in all the pages and posts and categories?

2) Also is it possible to do some customization on the top bar and move the social media on the left and add a menu on the right ?

3)last thing ( I am sorry ) I Noticed that below the header slider there is a blue line.. ( screen shot attached) can we get rid of it? not sure where it is coming from …

thank you ever so much !!!!

[Christopher]

Hi there,

#1 Please update this code :

.home .masthead  {
            position:absolute;
            width:100%;
            background-color:transparent !important;
     
       }
       body.x-navbar-fixed-top-active .x-navbar-wrap {
            height: auto;
       }
.home .x-logobar,.home  .x-navbar, .home .x-topbar  {
    background-color: transparent !important;
    box-shadow: none;
    border: 0;
  

  }

To :

 .masthead  {
            position:absolute;
            width:100%;
            background-color:transparent !important;
     
       }
       body.x-navbar-fixed-top-active .x-navbar-wrap {
            height: auto;
       }
 .x-logobar, .x-navbar,  .x-topbar  {
    background-color: transparent !important;
    box-shadow: none;
    border: 0;
  

  }

#2 & #3 Add this code :

.x-topbar .x-social-global {
    float: left;
}
.masthead-stacked .desktop .x-nav {
    display: block;
    float: right;
}
.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 {
    border-color: transparent;
}

Hope it helps.

[isa1978]

hey there awesome! thank you so much
the only thing I took out this part of the code
.masthead-stacked .desktop .x-nav {
display: block;
float: right;
}

because I want to keep it in the center.

What I meant is to have a little menu (different from the one below) on the top bar on the right. where the social media were.

is it possible?

thanks a lot
cheers 🙂

[Christopher]

Hi there,

You can add a static menu, by inserting following code in topbar :

<a href="#">Home</a> | <a href="#">Blog</a>

Hope it helps.

[isa1978]

awesome!
yes I will create a new menu and will do that!
thanks a lot 🙂

[Joao]

Let us know how it goes,

Joao

[isa1978]

HEY THERE!
it works great. the only things is I would need it on the right… as I moved the social on the left… sorry to be a pain…
I tried to figure out how to do it but no success 🙁

can you help? 🙂
thank you so much

[isa1978]

Hi again! 🙂
i just noticed that the menu doesn’t work. if I click on any of the bottons, nothing happens.
can you check if i did anything wrong? thank you so much 😉

[Paul R]

To move it to the right, you can add this under Custom > Edit Global CSS in the Customizer.

.x-topbar .p-info {
    float: right;
}

To fix your links, you need to change href with actualk links.

eg.

Change this

<a href="#">Home</a> | <a href="#">Blog</a>

to this

<a href="http://www.boundlessroads.com/">Home</a> | <a href="http://www.boundlessroads.com/archive/">Blog</a>

Hope that helps.

[isa1978]

it did help! thanks a lot 🙂

[Prasant Rai]

You are most welcome. 🙂

[Author]

Posts