Logo navbar inline aligned

[Neetra]

hi there,
I’m using one of your demo template. Very nice, tnx.

I’m trying to put my logo inline of menu but I’m not able from “option header”. It seems disable to any change because there are some CSS instruction.
I’m happy to use your demo and I like it but I need to put my little logo (picture in library) on the right of menu (near address).
What can I do? Any suggest?

Here some picture

Web site is: www.besexport.it1

[jade]

Hello Neetra,

You can your logo in X > Theme Options > Header > Topbar Content then add this code the current content:

<span><img src="URL_OF_THE_LOGO_IMAGE" alt="" /></span>

Then go to X > Theme Options > CSS:

then find this code:

.x-navbar .x-container, .x-topbar .x-container {
    position: relative;
    width: 100%;
    max-width: 1075px;
    margin-left: 0;
    padding: 0 1em;
}

then update it to:

.x-navbar .x-container, .x-topbar .x-container {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin-left: 0;
    padding: 0 1em;
}

and

.x-topbar .x-container .p-info {
    position: absolute;
    top: 50px;
    right: 0;
    width: 450px;
}

to

.x-topbar .x-container .p-info {
    position: absolute;
    top: 50px;
    right: 0;
    width: 580px;
}

then add this code:

.x-topbar .x-container .p-info {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

Hope this helps.

[Neetra]

Tnx for your kindly and fast reply.
Thats works but how I can set the “top” position? I would show it inline in the middle of navbar and it seems be little down…
you can see online my website.
Tnx,
Francesco

[lely]

Hi Francesco,

It is already align. The logo image has white part around it. That’s why it looks off and not align. You have 2 option here. First, cut the image and remove the white around it. Second, we can use another custom CSS:

.x-topbar .x-container .p-info span:last-of-type {
    margin-top: -12px;
}

https://screencast-o-matic.com/watch/cYVUiuweRO