Docs

[poyser7]

Hi There,

I was wondering if you could help me. Im creating a websites using the “Renew” child theme, and Id like to make a few adjustments to the Top bar and Navbar.

The details to the site are:
http://dev-3fev.pantheonsite.io
Wordpress 4.73
X – Child Theme – Renew

Navbar
Is there a way to get create a custom button on the right hand side of the nav bar? This is to be used for a direct link to the bookings page. It will have a different colour and look distinctive from the rest of the site. in full screen mode, id like it to look like the attachment “fullscreen.png”.

In Mobile view Id like it to appear across the top of the screen underneath the navbar see the attachment “Mobile1.png” and “mobile2.png”

Top bar
This will probably be easier. Id like to have the links within the top bar to shift into list mode when it shows in Mobile view. Im quite happy the way it looks in full screen view. Here is some custom code for a previous project which you gave me earlier this year;

body .x-topbar .p-info,
body .x-topbar .p-info a {
color:rgb(17, 126, 126);
font-size: 20px;
line-height: 20px;
}

@media (min-width: 768px) {
.x-topbar .p-info {
float: right;
margin-left: 7px;
margin-top: 10px;
}
}
body .x-topbar .p-info {background-color: rgb(92, 56, 125);padding-bottom: 10px;}
body .x-topbar .p-info a {
border-bottom: none;
border-radius: 10px;

color: #fff;
padding: 5px;
}
.x-topbar .p-info a:hover {
color: rgb(210, 83, 50);

It would be super cool if there was a way you could help me.

Best regards

jay

[Joao]

Hi There,

Your images did not upload, they need to be up to 500kb.

To turn the navbar booking link to look like a button please add the following code to Appereance Customizer Custom CSS

#menu-item-136 a {
    color: #fff;
    border-color: #ff7600;
    background-color: #ff7600;
    text-shadow: 0 0.075em 0.075em rgba(0,0,0,0.5);
    border-radius: 0.25em;
    padding-top: 12px;
    height: 35px;
    margin-top: 22px;
}
#menu-item-136 a span {
    box-shadow: none;
}
#menu-item-136 a:hover {
    color: #fff;
    border-color: #3f96ce;
    background-color: #3f96ce;
    text-shadow: 0 0.075em 0.075em rgba(0,0,0,0.5); 
  box-shadow: none;
}

Regarding the topbar, please add:

@media(max-width: 769px) {
body .x-topbar .p-info a {
    display: block;
}
body .x-topbar .p-info {
    color: transparent;
}
}

Hope it helps

Joao

[poyser7]

This reply has been marked as private.

[poyser7]

This reply has been marked as private.

[Joao]

Hi There,

You had a missing closig }

I also added the code to create the button, your menu link id is changed so I updated as well.

Hope it helps

Joao

[poyser7]

Oh my gosh, Joao – That is amazing!
i went into the code and made some adjustments to increase the size of the button, but you did an amazing job. THANK YOU!

Just one more thing though. If you see in the attached image “mobile2.jpg”, In mobile view, i’d like to now fix the “Book now” button underneath the navbar at full width of the screen.

Can you help me with that? or perhaps send me the code?

Really appreciate your help!

Jay

[Rad]

Hi Jay,

Please add this code to Admin > Appearance > Customizer > Custom > Javascript

jQuery( function($) {

function move_book_now_button() {

if ( $(window).width() <= 979 ) {

$('.x-nav-wrap.mobile .menu-item-275 a').addClass('x-btn book-now').appendTo('.x-navbar');

} else {

$('.x-navbar .x-btn.book-now').removeClass('x-btn book-now').appendTo('.x-nav-wrap.mobile .menu-item-275');

}

}

$(document).ready( move_book_now_button );
$(window).resize( move_book_now_button );

} );

Then add this CSS to your custom CSS.

.x-btn.book-now {
margin: 0px;
    box-shadow: none;
    width: 100%;
}

Hope this helps.

[poyser7]

Oh my god!!!!!
You are a genius!
That worked a treat. Thank you so much for that, I really appreciate it!

Here are the results. http://dev-3fev.pantheonsite.io

Have a great day!

[Rahul]

We are glad to know that it worked for you.

Feel free to write us back again.

Cheers!

[Author]

Posts