KLEO Header Height (navigation bar)

[lchild]

Hi!

I’ve looked everywhere on your threads but I wasn’t able to find what I need…

I need to make the header much taller (height) – and keep the menu items at the bottom of the header, which I did like this:

.kleo-main-header .container {
margin-top: 140px;
}

and it works! HOWEVER, I need the logo to be VERTICALLY centered.

So I tried to position it higher (vertical center) like this:

.logo img {margin-top: -70px;}

and it does move up, but it doesn’t “fit” within the Navigation Bar container. It looks cut off at the top (I can only see the bottom of the logo).

Please help! How can I position the logo in vertical center without it getting cut off?

Thanks so much for your prompt reply…

Laura

Attachments:

You must be logged in to view attached files.

[Catalin]

please send me a link to your website with the new logo activated… I will provide you the necessary code.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[lchild]

Thanks so much, Catalin!

This is the link:

http://www.rldiseno.org/groups (or any other page)… I’m just starting to configure it and haven’t even touched the home page…

The logo’s been activated.

Thanks again!

Laura

[Catalin]

please remove the css code you added bu yourself and I will provide you the code needed.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[lchild]

Done!

Thank you!

Laura

[lchild]

Hi Catalin, I never heard back from you…

Thanks,

Laura

[sharmstr]

How about this?

.kleo-main-header {
height: 140px;
}

.navbar-header .logo {
padding-top: 13px;
}

.collapse.navbar-collapse.nav-collapse.pull-right {
margin-top: 50px;
max-height: 80px;
}
 Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[lchild]

It made the logo tiny…

Check it out: http://rldiseno.org/right-sidebar-template/

Thanks,

Laura

[sharmstr]

Huh? It doesn’t look tiny to me 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

Attachments:

You must be logged in to view attached files.

[lchild]

Thanks to your code, I was finally able to position the logo correctly, within a tall header, which is what I wanted.

However, when you load the page for the first time, the logo appears in its normal size, but if you reload the page, it appears tiny (like on the Sticky Top Menu, although it’s turned off)… I’m attaching both screen pics.

Also: I need the menu items to be at the bottom of the header, how can I position them lower?

Thanks for all your help!

Laura

Attachments:

You must be logged in to view attached files.

[sharmstr]

I can’t reproduce your small logo issue, so I dont know how to fix it. Every time I refresh the page I get the normal size logo.

COPY CODE

ul#menu-kleonavmenu {
margin-top: 120px;
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[Catalin]

@lchild what browser are you using?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[lchild]

Thanks, I’m using Google Chrome…

[sharmstr]

So am I.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[Catalin]

On what Operating system since I can’t replicate it?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[lchild]

Hi, I’m using MacOSX (10.9.2)…

[Catalin]

So am I. this happens also on our demo site? I can’t replicate it so I can come with a fix

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[Author]

Posts