Include logo in top bar / make top bar "taller"

[Jacko_Pinto]

Hello!

Client requested a few changes on their site… I’m having trouble with these two:

• I need to place the logo on the top bar thus making that top bar “taller”; the logo would replace the current text thay says: “Asociación Nacional de Alcaldías e Intendencias” (Please see attached screen shot as a reference)…

• I need to add a background color and other effects (lines that separate menu items) to the menu bar… I’ve worked with UberMenu in the past… would you recommend I use it to achieve this? (See attached screenshot)

Thank you very much for your help!

[jade]

Hi there,

You can achieve this by doing the following:

• Add these to the Global CSS:

.x-brand {
    display: none;
}

.x-navbar {
    background-color: #667D8E !important;
}

.x-navbar .desktop .x-nav>li>a, 
.x-navbar .desktop .x-nav>li:first-child>a {
    border: 0;
}

The code above will remove the logo in its default position then set the background color of the navbar. Feel free to update the background color in the code.

Then to add the logo to the topbar, add this code in X > Theme Options > Header > Topbar Content:

<img width="100" src="//anai.cr/wp-content/uploads/2016/04/LogoANAI.jpg" alt="ANAI">

Here are some reference links related to the suggestions above:

• CSS Introduction - https://goo.gl/mFuWQT
• How to get CSS Selectors using Chrome - https://goo.gl/BmoH39
• HTML Introduction - https://goo.gl/oLmakx

Hope this helps.

[Jacko_Pinto]

Hello Jade,

Thank you very much for your reply.

How can I make the social icons on that top bar bigger? Also, can each of those social icons have its own color? Would it be possible to add an extra element (image) next to the logo?

I was also wondering about using Uber Menu, do you still support that?

I really appreciate your help. Thanks!

[Jacko_Pinto]

Hello again! So I figured out making the social icons bigger and giving each their own color

Can you please comment on adding an extra element next to the logo (to its right) and also about the use of UberMenu?

Thanks!!

[basanta]

HI There,

Thanks again for asking!

Similar to the logo, you can add any other HTML tag next tor the logo. fo that you may need extra CSS.
We don’t know exactly what you want to add, so wecan’t suggest you the code.

Regarding uber menu, you can still use it, we do support for that.

Thanks