header menu

[ag_2018]

how to stop it scrolling down with the page, for example if im scrolling the header menu will scroll down, can i keep it fixed some how at the top of the page and not move with the scroll???

[themes2go]

Only via CSS, you can add

@media only screen and (min-width: 1201px){
.qt-parentcontainer .qt-menubar {position: absolute !important; top: 0 !important;}}

[ag_2018]

okay header stays there, but the height still decreases, can’t it stay at a fixed height, also the header icons and text are in white by any chance can i make them black , so i can have a black header menu

[ag_2018]

okay header stays there, but the height still decreases, can’t it stay at a fixed height, also the header icons and text are in white by any chance can i make them black , so i can have a black header menu

[themes2go]

1) header: in the customizer > Header disable “transparent header”. It will fix the gap.
2) The menu colors are controlled in Appearance > Customize > Colors. They follow the website palette, you can’t change its color “independently” as this would crush with other parts of teh site.

[ag_2018]

can i somehow change like the height of the header, as its a big too chunky? is that possible in the code

[themes2go]

Hello,
editing header height will cause a cascade of issues so I can point you to a quick fix but you would check if this can work for you.

In Appearance -> Customize -> Additional CSS add these snippet of CSS:

.qt-menubar ul.qt-desktopmenu {
    padding: 10px 50px;
}

.qt-parentcontainer {
    padding-top: 90px;
}

You can edit the first 10px padding and then the 90px padding-top to fit your needs.
Hope this can help you,

Andrea

[ag_2018]

i think we miscommunicated, i want to change the desktop menu to be the smae height as the one with wen u shrink the page. i .e the mobile header doesnt change height, stays the same. can i do this for the desktop menu, i mean its a bit to tall.

[themes2go]

Hello,
this will work for you. As stated in the previous post, add in the Additional CSS of the Customizer:

.qt-menubar ul.qt-desktopmenu {
	padding: 0px 70px;}

@media only screen and (min-width: 1201px) {
    .qt-parentcontainer {
        padding-top:70px
    }
}

Have a good day,
Andrea

[ag_2018]

hello, yes this is exactly what i wanted :). however the burger tab in the phone version, or short desktop version, has padding to the left now anyway to get this to left corner again. is it not possible to like add this css in the desktop menu php or something, so it doesnt affect anything else, just a thought

[themes2go]

Hello!
You can easily fix it with some CSS. Paste this code below the previous one:

@media only screen and (max-width: 1200px) {.qt-menubar ul.qt-desktopmenu {
	padding: 0px 0px;}

}

Have a good day!
Andrea

[ag_2018]

hey so i’ve tried both codes in combination with the header to stay in the same location, and there was a few glitches that happened right off the bat, for example, the footer went a bit weird, i removed the css but the header and footer stayed messed up. Is there any solution to this, as i really loved the way it looked with the css codes – it was exactly what i wanted. p.s. I had tried your codes on a brand new site as i restarted the website, so i dont think any of my content was affecting it.

[themes2go]

Hello,
as stated in previous replies:

…editing header height will cause a cascade of issues

And this is the case.
If you send me some screenshots I would see if the issue could be fixed easily.
That’s it.

Andrea

[ag_2018]

isnt there any possible way of it not glitching? i really would like that header, because i feel the original header is a bit too chunky
https://pasteboard.co/HFI7YvD.png

https://pasteboard.co/HFI88K5.png

[ag_2018]

also those images are after i removed the css, im confused as to why it has not gone to its original state?? also i have added css to some pages, but i doubt that that css is affecting this issue. even after removing the css you have me the glitch persists, which is confusing because no other codes were changed..?

[themes2go]

Hello!
I can’t replicate your issue on my installation. After adding the CSS snippet I’ve provided to you inside the Custom CSS panel, the theme works nice.

See the images below:

https://imgur.com/bthZFfX

https://imgur.com/xup5GNJ

If you can, try installing from scratch the theme and add only the last two CSS snippets. It will work.

Have a good day,
Andrea

[ag_2018]

Okay I’ll do that, I usually add the css for it to stay in same position aswell, which u gave me long time ago. But okay I’ll reinstall it

[ag_2018]

@media only screen and (max-width: 1200px) {.qt-menubar ul.qt-desktopmenu {
padding: 0px 0px;}

}

.qt-menubar ul.qt-desktopmenu {
padding: 0px 70px;}

@media only screen and (min-width: 1201px) {
.qt-parentcontainer {
padding-top:70px
}
}

@media only screen and (min-width: 1201px){
.qt-parentcontainer .qt-menubar {position: absolute !important; top: 0 !important;}}

okay so i add the 3 codes above, to keep same height and for it to stay there, could you check if those 3 codes are compatible and don’t conflict with each other, because i used them 3 codes you provided and it caused the issues. so if you could double check for me, because i did reinstal the theme and got the same issue, the thing is i remove the code but the issue remains. also am i suppose to add this in the additional css or the css in the child theme. if you could fix this for me it would be great. as this looking header is the one i really liked, it makes the theme perfect, thank you so much for all the help i appreciate it alot

[themes2go]

Hello,

you should enter only this:

.qt-menubar ul.qt-desktopmenu {
	padding: 0px 70px;}

@media only screen and (min-width: 1201px) {
    .qt-parentcontainer {
        padding-top:70px
    }
}

@media only screen and (max-width: 1200px) {.qt-menubar ul.qt-desktopmenu {
	padding: 0px 0px;}

}

[ag_2018]

would that keep it stationary?? i want it to stay there aswell ?

[themes2go]

Sure!

[ag_2018]

does that mean its fine to use all 4 codes?;

@media only screen and (max-width: 1200px) {.qt-menubar ul.qt-desktopmenu {
padding: 0px 0px;}

}

.qt-menubar ul.qt-desktopmenu {
padding: 0px 70px;}

@media only screen and (min-width: 1201px) {
.qt-parentcontainer {
padding-top:70px
}
}

@media only screen and (min-width: 1201px){
.qt-parentcontainer .qt-menubar {position: absolute !important; top: 0 !important;}}

[themes2go]

I don’t send you the last media query

@media only screen and (min-width: 1201px){
.qt-parentcontainer .qt-menubar {position: absolute !important; top: 0 !important;}}

Just use:

.qt-menubar ul.qt-desktopmenu {
	padding: 0px 70px;}

@media only screen and (min-width: 1201px) {
    .qt-parentcontainer {
        padding-top:70px
    }
}

@media only screen and (max-width: 1200px) {.qt-menubar ul.qt-desktopmenu {
	padding: 0px 0px;}

}

[ag_2018]

doesn’t that still cause the header to scroll down with the page, i want the header to stay there at the top and not move with the scroll, if you get what i mean, thanks.

[themes2go]

Hi!
Your first request was regarding getting the menu smaller and the CSS snippets I’ve provided you do the job.
The header will always be sticky because it’s deeply integrated (with the help of javascript) into the theme and currently there is no option to change it.

Hope this can help you,
Andrea

[ag_2018]

originally and ages ago i was given this;

@media only screen and (min-width: 1201px){
.qt-parentcontainer .qt-menubar {position: absolute !important; top: 0 !important;}}

cause i wanted to keep it there, as im embedding videos, the header gets in the way basically. so is there absolutely no way to keep it there?? again i was given this code ages ago

@media only screen and (min-width: 1201px){
.qt-parentcontainer .qt-menubar {position: absolute !important; top: 0 !important;}}.

so i dont know, im very confident with following instructions and with java/html. so i would mind if you could lead me on the track to edit the java or watever. because as long as i can have a header that stays at the top, id be really happy with this theme, its my only last concern in all honesty. any help would b great thanks so much

[ag_2018]

P.s I don’t mind even the header you have on this forum site

[themes2go]

Hello!
After a talk with our developer, he suggests you this without handling js or something heavier in terms of coding.

In the customizer paste this after the CSS snippets I’ve provided you in previous replies:

@media only screen and (min-width: 1201px) {
.qt-parentcontainer .qt-menubar {
    position: unset; 
    margin-top: -70px;
}
	
}

Hope this could be a final fix for your issues 🙂
All the best,

Andrea

[ag_2018]

Thanks, is it fine then to use the other 3 codes with this code aswell then??

[themes2go]

You MUST use it with other 3 codes otherwise the menu will turn it back to the original height.