[Resolved] Place Motor Reservation my booking

[Luis Antonio]

Hello, good morning, can you help me? I’m trying to place on a hook “before footer” the code : <script src=”https://hotels.cloudbeds.com/widget/load/vtUOyv/float”></script&gt; and the reseatch search engine automatically appears on the header over the menu, can you tell me how to lower it from the footer, thanks!

Img

img

[Jean Paiva]

Hello Luis, this script call external html/css/js, maybe you will have to tweak some css for displaying properly on your page.

If you share the link with the element on page maybe we could help you. 🙂

[Luis Antonio]

It temporarily will activate to see the error

website

Thanks

[Tom]

This CSS might help:

.float_bg2 {
    bottom: 0;
    top: auto;
}

[Luis Antonio]

Hi tom, I need to place “the menu reservation” in the “footer”
img

Thanks,

[Luis Antonio]

Hi tom!,

.float_bg2 {
    bottom: 0  !important;
    top: auto  !important;
}

@media (min-width: 1060px)
.floatWrapper {
    /* padding-bottom: 51px; */
}

Error :

img

[Tom]

Try setting the padding to 0px:

@media (min-width: 1060px) {
    .floatWrapper {
        padding-bottom: 0;
    }
}

[Luis Antonio]

Thanks add !important;

`

@media (min-width: 1060px) {
.floatWrapper {
padding-bottom: 0 !important;
}
}

[Tom]

You’re welcome 🙂

[Luis Antonio]

Hi tom! I have problem for menu reservation version mobile

Image example

img

I need the menu is always in footer

Thanks !

[Tom]

You need to overwrite the CSS added by the widget:

@media (max-width: 549px) {
    .CloudBedsWidget .float_bg2 {
        position: fixed !important;
        width: 100%;
        height: 107px;
    }
}

[Luis Antonio]

No found 🙁

`
.main-navigation, .main-navigation ul ul {
background-color: #F0EDE6;
opacity: 0.9;
}

@media (min-width: 769px) {
.main-navigation .sticky-logo {
position: absolute;
top: -20px;
left: 0;
z-index: 500;
}
.main-navigation .sticky-logo,
.main-navigation .sticky-logo img {
height: 200px;
}
}

.float_bg2 {
background: #00a0d2 !important;
width: 100%;
z-index: 50001;
left: 0;
/* top: 0; */
display: block;
color: #fff;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: 600;
border: none;
border-bottom: 2px solid #fff;
box-shadow: 0 3px 5px #808080;
}

.float_bg2 {
bottom: 0 !important;
top: auto !important;
}

@media (min-width: 1060px) {
.floatWrapper {
padding-bottom: 0 !important;
}
}

@media (max-width: 1059px) {
.floatWrapper {
padding-bottom: 0 !important;
}

@media (max-width: 549px) {
.CloudBedsWidget .float_bg2 {
position: fixed !important;
width: 100%;
height: 107px;
}
}

[Tom]

You added it inside the other media query. Add that CSS to the very bottom of your custom CSS (outside of the other media query).

[Author]

Posts