Help to change the logo bar

Hello guys
I really hope you can assist me with this.
I want to change again the lay out of my header but I cannot do it on my own

IN the past you help me set up my present header see thread here below

Now I realized I need to change it again to the simple one. But you wrote a code for me and I am a bit scared to touch it I don’t want to make a mess.

What I want now is simple,
the logo bar goes up top below the upper bar and with a white background,
below that I would put the picture
Below the picture the menu bar, just like it is now.
So the menu bar doesn’t need to be touched.
just move the logo bar above the picture, in the middle and with a white background.

Here I did a sketch I am not sure if it can help to better understand my idea.

Could you please help me?
thank you so much :slight_smile:
cheers
Isabella

Hi Isabella,

Thank you for writing in, the way your header is structure now become complicated. You need to restore the original layout, that means you need to remove all custom CSS and JS provided on that other thread.

Or don’t remove it, just comment it out so you can easily restore it if needed.
Comments in CSS

The original layout of the header is:

Slider Above Masthead
Topbar
Logobar
Menubar
Breadcrumbs

If you can restore this default we can insert an image between logobar and menubar by modifying the _navbar.php

OR

You might want to upgrade to PRO instead so you can easily build a custom Header

Pro - Header and Footer Builder Introduction
X To Pro Conversion

Thanks,

hey @friech
thanks a lot
I did comment this code out.

but I can’t see what else should I comment out.

can you help me please? ps nothing has changed though…

thanks a lot
cheers
isabella

/* Added by X Staff for the Custom Slider in blog posts and other pages */
.has_custom_slider .x-logobar .x-container.max.width {
width: 100%;
max-width: 100%;
position: relative;
}

.has_custom_slider .x-logobar .x-logobar-inner {
padding-top: 0;
padding-bottom: 0;
}

.has_custom_slider .x-logobar .x-brand.img {
position: absolute;
top: 20%;
left: 0;
z-index: 9999999;
width: 100%;
height: 100%;
}

.has_custom_slider .masthead-stacked .x-navbar .desktop .sub-menu {
background-color: white !important;
}

/* Added by X Staff for the pages with sliders */
.page .x-slider-container.above .x-logobar .x-container.max.width {
width: 100%;
max-width: 100%;
height: auto;
position: relative;
}

.page .x-slider-container.above .x-logobar .x-logobar-inner {
padding-top: 0;
padding-bottom: 0;
}

.page .x-slider-container.above .x-logobar .x-logobar-inner .x-brand {
float: none;
}

.page .x-slider-container.above .x-logobar{
position: absolute;
top: 20%;
left: 0;
z-index: 9999999;
width: 100%;
height: auto;
text-align: center;
}

.page .masthead-stacked .x-navbar .desktop .sub-menu {
background-color: white !important;
}

Hi Isabella,

It seems there is a template modification involve on your custom Slider. Would you mind providing FTP credentials as well?

Thanks,

sure thanks

Hi Isabella,

Please check it now,

Here’s what I did, I commented out the custom CSS and JS that we provided on the other thread, and then I moved the Slider Above Masthead between logobar and menubar (normally it is in the very top)

Please be reminded, while we’re happy to provide solutions involving custom code this falls outside of the support that we can offer, further modification, enhancement from here would not be supported, you might want to seek help from a developer should you not feel comfortable making these changes yourself.

Thank you for understanding,

Hello @friech
thank you so much for your help. I didn’t know it was out of your support. This is why I wasn’t sure you could help me.

What you did was great. exactly how I wanted it.

However there is one thing more I need to ask. you please tell me if you can tell me how to do it or I need to ask elsewhere.

I need to make the top bar on a different color, the same color as where the breadcrumbs is. So that it can be distinguished from the logo bar which I want to leave as it is (white) .

thanks a lot again
you are awesome!!
cheers

Hi Isabella,

Do you mean the background color to be the same as the breadcrumbs? You can do that by adding this CSS to your global custom CSS.

.x-topbar {
    background-color: rgba(0,0,0,0.0225) !important;
    box-shadow: 0 1px 0 0 rgba(255,255,255,0.715) !important;
    border-bottom: 1px solid rgba(0,0,0,0.1) !important;
}

Thanks!

amazing!
thank you so much
cheers

You’re welcome!
We’re glad we were able to help you out.

1 Like

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.