Menu jumping up in small desktop view

Hi,

How can I stop the logo and main menu from jumping up about 30px in small desktop view?

Regards

Hi

Please show me what You have in mind exactly. And send me an url to Your site.

Hi Teibite

You will see this action in all of the quark templates. I guess its for the purpose to offer more screen space in desktop views smaller than ca 1150px.

I am trying to find the code that controls how much the menu and logo skips up.

Thanks

Hi

Yes this is a part of responsive functionality. Basically header is resized to fit to smaller screens. If You want to keep it in original size add this code to override.css and make sure override is enabled in template settings:

Code: Select all

.frontpage #gkHeaderMod, .frontpage .blog-page > .header,
.frontpage .single-page > .header, .frontpage .search-page .header {
    height: 800px !important;
}


Thanks Teitbite. I tried it but the menu and logo keeps skipping up. (with override css enabled).

Let me rephrase this question for more clarity… How do I control how high the logo and menu skips up?

Because lets say I wish to have the menu a bit higher up in it’s original position, then it will skip up out of sight in smaller desktop views.

Let me rephrase this question for more clarity… How do I control how high the logo and menu skips up?

Because lets say I wish to have the menu a bit higher up in it’s original position, then it will skip up out of sight in smaller desktop views.

Search for this in css:

Code: Select all

#gkHeaderNav .gkMainMenu {
  color: #1b1d1e;
  cursor: pointer;
  display: block;
  float: right;
  font-size: 14px;
  font-weight: bold;
  height: 42px;
  line-height: 18px;
  margin: 60px 0 0 0 !important;
  padding: 0;
  position: absolute;
  right: 0;
  text-align: center;
  text-transform: uppercase;
  top: 0;
  width: auto;
}

Use this in override to adjust height (paste this in override css):

Code: Select all

#gkHeaderNav .gkMainMenu {
  margin: 6px 0 0 0 !important;
}

But you still need to adjust logo height (in override css):

Code: Select all

#gkLogo {
  margin: 20px 0 0 0;
}

put the override code in template manager > advance settings > override code (paste here)

I have tried it and the height of menu will stay the same if you make the tab smaller

Hope it is useful!

Highly appreciated xWiz, you're good!

It works perfectly. I also added a “padding-top” to horizontally position the menu and logo in the fixed nav.

Is there a solution to exclude adding the custom code in advanced settings and just use the override? I’m trying to keep everything in one place.

Thanks!

No problem!

Yes you can use it in the override file. It shouldn't be a problem. It works the same as advanced setting.

Yea I just replaced it, thanks.

Btw, changing the margin-top of "#gkLogo.text" instead of "#gkLogo" works much better together with the fixed nav.