-
Posts
-
Hello,
I set my main menu to BURGER style and would like to a add a slogan on top of my page, between the logo and the burger menu, in the middle of the page.
Is there any way to do that? I added a screenshot to how I would like it to look like!
THANKS SO MUCHI’ve tried it with a background image for the header, but as soon as I start scrolling and the header gets smaller the image doesn’t correspond accordingly – it’s not responsive!
If it’s responsive, I would like to show it on tablets, if not then not!
Also, how can I avoid showing the background image on mobile!Hi NoraGTS,
It is better to add that image in the widget, this way we’ll be able to make it more adjustable.
https://kriesi.at/support/topic/adding-a-widget-area-to-the-header-6/Best regards,
VictoriaI should add this to the function.php of the child theme? But I don’t use the child theme? Where do I need to add what?
SORRY but I’m confused!Hi NoraGTS,
Well, at this point it is better to use the child theme. If not the changes will be overwritten.
You can still add the code in the parent theme functions.php right after this line:
if(isset($avia_config['use_child_theme_functions_only'])) return;Best regards,
VictoriaSo what do I need to do? Should I install the child theme and get rid of my current theme? But then all that is done is gone as well? How can I add the child theme, and where do I need to add what code????????
I really don’t know how to solve this problem. I just want my header image to be responsive and not to disappear as soon as I start scrolling! Please let me know how to do that.
So in order to get the header Image to work responsively I installed the child theme – but now I need to REDO the entire setup? I’m almost finished with my project, and now have to redo everything? There needs to be a better solution – import export the theme settings or whatever?
So I added the child theme – kept the parent theme active though.
Added the code to the function.php in the editor (for the child theme), added a header widget, added an image in the widget, but nothing appears.
Alternatively I also tried to add text to the header widget, but this didn’t appear either.
AND: I updated the theme to it’s current version, because my the fullwidth submenu isn’t sticky (although I set it to be sticky), but the update didn’t help either. The menu fullwidth submenu is still not sticky although it’s set to sticky.
PLEASE HELP!
thanks noraUpdate: So I did whatever was needed but now I need to get the header widget to be centered in the middle from top to bottom of the header area – AND of course it needs to be responsive, so as soon as the header shrinks, the font must shrink too.
I added this code to the header widget:
<h1 style=”text-align: center;”><span style=”font-size: 44pt;”>urban healthy conscious</span></h1>
And added this code to quick CSS:
#top #header #header_main .widget{
width: 100%;
line-height: 35px;
color:#6786a1;
}
So maybe there is another way to make it centered from top to bottom instead of using the line-height? But this still doesn’t resolve the problem that the font doesn’t shrink as soon as I start scrolling.AND: I updated the theme to it’s current version, because my the fullwidth submenu isn’t sticky (although I set it to be sticky), but the update didn’t help either. The menu fullwidth submenu is still not sticky although it’s set to sticky.
PLEASE HELP!
thanks noraHi NoraGTS,
This is great progress. Please add the following css:
#top #header.header-scrolled #header_main .widget { padding: 5px; }Best regards,
VictoriaHello,
Thanks for the encouragement.
However, this code didn’t change anything.
I tried adding it to the style.css sheet of my child theme, and/or to the quick css file. But nothing changed.
The header font is still not responsive.
And my fullwidth submenu is still not sticky :-(
Thanks NoraSorry – emptied the cache and now I see the changes.
However, one question: Should I add such codes rather to the style.css sheet of my child theme under THEME_EDITOR, or in the general styling quick css code. Is all the code in the quick css code overwritten if there is an automatic update?And do you have any advice for this:
AND: I updated the theme to it’s current version, because my the fullwidth submenu isn’t sticky (although I set it to be sticky), but the update didn’t help either. The menu fullwidth submenu is still not sticky although it’s set to sticky.THANKS nora
Weird: I have the font for the header in the header widget set to:
<h1 style=”text-align: center;”><span style=”font-size: 30pt;”>urban healthy conscious</span></h1>
But this only applies to the startpage – not to the other pages. How can I set it to appear like that on ALL headers, not only on the startpage.
On the other pages the font appears fat and doesn’t show h1 font.
thanks NoraI would like it to look like on the front page – slimmer. But it’s different on all other pages.
I don’t get it why!Hi NoraGTS,
Because pt is a relative unit, try setting the style in px, just change the inline style that you added from 30pt to 30px.
Best regards,
VictoriaActually I left it all out and just set it to h1 and set my h1 in extended styling to LIGHT, but this still gives me the font that I like on the front page, and everywhere else it gives me the fatter font (which I don’t like).
I also tried it with px instead of pt – that didn’t change the font to a slimmer state either!
How is it possible it shows differently on subpages?Hi NoraGTS,
I do not understand why such a difference. It has to look the same.
I tried to make it lighter on other pages but it does not work.
Here is the css to make the font the same on the front page as on other pages:#top #wrap_all #text-7 .textwidget h1 { font-weight: 400; }Best regards,
VictoriaNow it’s FAT on all pages, I wanted to have it SLIM on all pages, as it was on the startpage.
So I changed it to:
#top #wrap_all #text-7 .textwidget h1 {
font-weight: 200;
}Do you see it slim now? I only see it fat now on all pages.
AND: One more question: Is it better to add such codes to the quick CSS or to the style.css in the child theme?
THANKS NoraHi NoraGTS,
It does not matter where you put the code. It just does not want to render at font-weight: 200. This is the rule shown to apply and it should look slim.
I will ask my colleagues to have a look.
Best regards,
VictoriaCould you also help me make this header widget look smaller in font on mobile or tablet? What code would I need to add?
THANKS NoraHi,
Thanks for the update.
Just add the font-size property for the h1 element.
#top #wrap_all #text-7 .textwidget h1 { font-weight: 300; font-size: 16px; }Wrap that css code inside a css media query.
Best regards,
IsmaelI added the following:
@media only screen and (max-width: 767px) {
#top #wrap_all #text-7 .textwidget h1 {
font-weight: 200;
font-size: 23px;
}}But this gives me too much space on top and bottom – you might want to take a look.
ALSO: I still don’t have a solution that the font is not showing in font-weight 200 but fat.
On Desktop: On my startpage it looks fine, but on all subpages the font is fatter and not 200. I set all the proper settings in h1 extended styling, but it always gives me 2 different options. I want it to look like on my startpage – on ALL PAGES, slim, not fat!
On Mobile: the font doesn’t appear to be slim either!I added the following:
@media only screen and (max-width: 767px) {
#top #wrap_all #text-7 .textwidget h1 {
font-weight: 200;
font-size: 23px;
}}But this gives me too much space on top and bottom – you might want to take a look.
COULD YOU LET ME KNOW THE CODE IF I DON’T WANT TO SHOW IT ON SMARTPHONES AT ALL?ALSO: I still don’t have a solution that the font is not showing in font-weight 200 but fat.
On Desktop: On my startpage it looks fine, but on all subpages the font is fatter and not 200. I set all the proper settings in h1 extended styling, but it always gives me 2 different options. I want it to look like on my startpage – on ALL PAGES, slim, not fat!
On Mobile: the font doesn’t appear to be slim either!Hi,
But this gives me too much space on top and bottom – you might want to take a look.
Try to remove the widget padding.
#top #header #header_main .widget { padding: 0; }ALSO: I still don’t have a solution that the font is not showing in font-weight 200 but fat.
That font weight is not available for that font. You should set it to 100 instead.
#top #wrap_all #text-7 .textwidget h1 { font-weight: 100; }If you have any additional questions at this time we kindly ask that you open them up in a separate thread. The longer threads get in the forum, they become more difficult to support as they tend to drift off topic and they also make it troublesome for users trying to search for solutions. Keeping threads relevant to their original inquiry ensures that we can keep better track of what has been resolved and that users can more effectively find answers to similar issues they might be experiencing.
Thanks!
Best regards,
IsmaelI tried this already:
#top #wrap_all #text-7 .textwidget h1 {
font-weight: 100;
}But it didn’t change a thing. The textwidget still looks different on the startpage and on all subpages. I want it to look as slim as it does on the startpage.
For Mobile: COULD YOU LET ME KNOW THE CODE IF I DON’T WANT TO SHOW IT ON SMARTPHONES AT ALL?
THANKS Nora
- The topic ‘Add slogan next to Logo’ is closed to new replies.