KLEO Header Height (navigation bar)

This topic has 16 replies, 3 voices, and was last updated 10 years by Catalin.

Author

Tagged: menu, header, navigation
October 7, 2014 at 04:00 #30899

lchild
Participant

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.

October 7, 2014 at 12:55 #30921

Catalin
Moderator

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

October 7, 2014 at 18:22 #30988

lchild
Participant

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

October 8, 2014 at 15:03 #31077

Catalin
Moderator

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

October 8, 2014 at 16:59 #31094

lchild
Participant

Done!

Thank you!

Laura

October 14, 2014 at 04:01 #31654

lchild
Participant

Hi Catalin, I never heard back from you…

Thanks,

Laura
October 14, 2014 at 04:28 #31657

sharmstr
Moderator
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
October 15, 2014 at 17:45 #31828

lchild
Participant

It made the logo tiny…

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

Thanks,

Laura

October 15, 2014 at 18:12 #31829

sharmstr
Moderator

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.

October 15, 2014 at 18:40 #31832

lchild
Participant

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.
October 15, 2014 at 19:01 #31838

sharmstr
Moderator
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
October 15, 2014 at 21:47 #31853

Catalin
Moderator

@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

October 15, 2014 at 21:54 #31857

lchild
Participant

Thanks, I’m using Google Chrome…

October 15, 2014 at 22:27 #31858

sharmstr
Moderator

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

October 17, 2014 at 01:41 #31987

Catalin
Moderator

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

October 17, 2014 at 03:23 #32001

lchild
Participant

Hi, I’m using MacOSX (10.9.2)…

October 20, 2014 at 14:41 #32217

Catalin
Moderator

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

Viewing 17 posts - 1 through 17 (of 17 total)

The forum ‘KLEO’ is closed to new topics and replies.

Attachments:

Attachments:

Attachments:

Search KB

Log in with your credentials

Forgot your details?