Menu Height with Center Logo Option

[mburke79]

Hi,

Great theme!  I spent some time searching but I didn’t see this particular issue so I apologize if this is duplicate.

My client would like to use the center logo option for the header, and make it quite large (maybe 250px tall), but we want the main menu (below the logo) to be of normal height (maybe 75px tall).  As it is now, the menu height seems to be matching the logo height.  I tried adding some quick CSS myself but I had no luck.

Can you advise please?

[Laura]

Hello, you can try

COPY CODE

strong.logo img {
    height: 250px !important;
}
ul#menu-main {
    height: 75px !important;
}
ul#menu-main li a {
    height: 75px !important;
}

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

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[Laura]

Let me know if it works 🙂

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

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[Radu]

Hi,

Try with this CSs and let me know

COPY CODE

.kleo-main-header .nav > li.active > a {
    line-height: 35px !important;
}

.kleo-main-header .nav > li > a:hover {
    box-shadow: inset 0px -2px 0px 0px #854c14;
    padding:0 !important;
    marign:0 !important;
    height:80px !important; 
}

.navbar-nav > li {height:75px !important;}

Cheers

Radu

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

What support service includes ? What not ?

[mburke79]

Hi Radu,

Thanks for the reply. I added your CSS, and did a little styling on my own. I’m close to having what I want, but the actual menu-text is now out of place. See http://181.224.136.16/~grounded/yogiville.com/home/

Here is the CSS as I have it currently:

/*–Header Styling–*/

#menu-main {
height: 75px !important;
border-top: 2px solid #854c14;
}

#menu-main a {
height: 75px !important;
}

.kleo-main-header .nav > li.active > a {
line-height: 35px !important;
}

.kleo-main-header .nav > li > a:hover {
box-shadow: inset 0px -2px 0px 0px #854c14;
padding:0 !important;
marign:0 !important;
height:80px !important;
}

.navbar-nav > li {height:75px !important;}

Can you get the menu items vertically centered in the area below the logo?

Thanks!
Mike

[Radu]

Hi,

Please replace the code that i have you provided with next code

COPY CODE

/*–Header Styling–*/

.kleo-main-header .nav > li.active > a { line-height: 55px !important; }
.kleo-main-header .nav > li > a { line-height:55px !important; }
.navbar-nav > li {height: 75px !important;}

Let me know

Cheers

RAdu

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

What support service includes ? What not ?

[mburke79]

That did the trick. Thank you!

[Radu]

You’re welcome

Have a nice week

Cheers

Radu

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

What support service includes ? What not ?

[Author]

Posts