Menu height

Hi,

I want to change the menu height and have followed the instructions here: http://www.gavick.com/documentation/joo ... -menu-bar/

But I can´t get it to work. I can only get the lines in each side to change!
I have tried to disable the logo, to make sure that was not the problem.

So, my first question is: is the documentation right for this template also or do I miss something?

Cheers,

Could you please post an url to your site?

eyereports.com

As you can see, I use the highlight position as menu as well, so I need both menu heights to be reduced.

Hello,

@JPACK - please add the following code at the end of any CSS file:

Code: Select all

#gkTopBar {
line-height: 40px!important;
}
#gkSearch #mod-search-searchword {
height: 40px!important;
line-height: 28px!important;
}
#gkTopNav {
height: 40px!important;
}
.gkMenu > ul > li {
height: 40px!important;
line-height: 41px!important;
}
.gkMenu > ul > li > a {
height: 40px!important;
line-height: 41px!important;
}
#gkSocial a {
height: 40px!important;
}
#gkSocial i {
line-height: 48px!important;
}

Works great!

Thanks a lot for your help

Cheers,

hi
Works. But now the problem with "search". He leaves when resizing the browser.
and how to remove the void?

Could you please post an url to your site?
What do you mean by "void"?

What do you mean by "void"?

not converge position

http://www.labytnangi.net/

Could you please enable use of override.css on your site?

Could you please enable use of override.css on your site?

Yes, override.css.

I made a right that the code was inserted in the file "menu.css"?
or is it in "Custom CSS code"?

Actually due to a bug in our template easy fixing this css issue is not easy.
Please leave your custom css code where it is, but also modify this file:
templates/gk_news2/css/tablet.css
and modify this declaration:

Code: Select all

#gkMobileMenu {
color: #fff;
display: block!important;
font-size: 24px;
height: 39px;
line-height: 44px;
margin: 0px 0 0 0!important;
position: relative;
text-align: right;
width: 54px;
}


and this one:

Code: Select all

#gkSearch {
border-left: none;
border-right: 1px solid #e5e5e5;
left: 33.333333%;
position: absolute;
top: -41px;
width: 25%;
}


Now the finall thing to fix missing bottom line under search box is to increase top bar with one pixel, to do so, please edit file
templates/gk_news2/css/menu/menu.css
and modify this declaration:

Code: Select all

#gkTopNav {
height: 41px!important;
}


Thank you very much Cyberek

can all make changes in one file override.css? So will this work? just so convenient

sorry, you misunderstood me. Using the code is as pictured. The photo shows the error. Takes search. The error occurs when you change the browser window.
I can not understand as it to align properly. After edits appear not converging positions.
I just need to do less height

that's what I want to do.
But I can't. Help please.

sorry, you misunderstood me. Using the code is as pictured. The photo shows the error. Takes search. The error occurs when you change the browser window.

sorry , not put in there by code

seems to be understood
to the rest need to align every element separately to align?

Code: Select all

.gkHighlighterInterface span.text {line-height: 41px;
}
.gkHighlighterWrapper {
height: 41px;
}
.gkHighlighterInterface div a {
margin: 8px 0 0 5px;
}

Now everything is fine.
Displays everything as it should
thanks again

Ok, I'm glad you could solve it out by yourself.
Sadly now due to a small bug you can't put all those changes in one override, but hopefully our dev team will fix it soon so media queries and !important can be used correctly in override.css.

Is there anything else I can help you with regarding this topic?

Nothing more. Thank you. )

If you will have any other questions, feel free to post new forum threads.

hi
why, when you scroll down the page are not displayed correctly button "Login"? changing the style

https://www.gavick.com/forums/news2-joomla3/after-scrolling-down-the-page-menu-is-distorted-41262.html

solved, override.css.

Code: Select all

#gkLogin {
height: 40px!important;
line-height: 41px!important;
} 

I'm glad you could figure it out.