Bug with logo in header

[Ixinho]

Hello : )

After changing height of the header in appearance – > theme options – > backgrounds and even after deleting value (reverting to default) my logo became so much smaller and even after removing logo and adding new one, it remains small so i guess changing height of the header basically changes css but it won’t change it to default after clearing value.

I was wondering how can i reduce the height of the header (after i did that in options it only got bigger than default, not thinner) and how can i have one logo for regular menu and one for sticky menu, but i would like to have some text next to the regular menu logo. Possible?

[Ixinho]

Ok, seems it was some weird temporary bug even though i refreshed thousand times, logo got back to normal size. However you should still check that in case it is a bug. Just change header height in background options and see if something happens with the logo size.

However, is it still possible to have some css-styled text next to the logo and then on the sticky logo text should disappear . . ?

[Veena]

However, is it still possible to have some css-styled text next to the logo and then on the sticky logo text should disappear . . ?
Can you pls clarify this query?

[Ixinho]

I ll try to be more clear with two screenshots.

First one, i have a little logo, and i would like to have text next to it, i could make a logo picture with text but i need text to get translated when the language is changed.

Second one, it’s the sticky menu when im scrolling the page, i would like that text to disappear if possible?
my little logo goes out of the menu borders (how can i increase the height of the sticky menu just a bit so that the logo fits?)

Thank you in advance, let me know if i was unclear again.

Cheers friends

[Veena]

For adding site tagline :
Pls add required tagline in settings > general – Tagline .

Then to display tagline you need to modify file framework/functions/header-title-area.php line no:36 to

$display_desc = true;

also change line no:38 to

echo '<div id="site-description"><span>';
             bloginfo('description');
          echo '</span></div>';

you may need to style it.

And have this custom CSS in themeoptions to hide the tagline in sticky header –

#header.sticky #site-description {
    display: none;
}

Hope this helps .

[Ixinho]

Thanks again phoenix for great support, i really appreciate it.

Your code did what i needed, but i need just a bit more help. You can see 2 screenshots, regular and sticky header.

– how can i break it into two lines? i would like the second part after “|” to be in second line.
– how can i align it with the logo height?
– how can i make it a bit smaller font and white color? (same for the language switcher in the right corner, “selector php” code you gave me to put into header. how can i make it white and a bit smaller?
– why does the logo escape the borders when in sticky menu?

thank you very much

[Veena]

– how can i break it into two lines? i would like the second part after “|” to be in second line.

For this you need to modify the below line (line no:39)from-

bloginfo('description');

to

 echo 'just another  wordpress site';

just another wordpress site is an example you need to give your site tagline there and after br tag you need to add the other line that you want to display in second line . Pls try out this and see if that helps .

[Veena]

– how can i align it with the logo height?
Since your site is offline its very difficult to suggest exact custom CSS but you can try the below one –

#site-description {
    position: relative;
    top: 20px;
    right: -30px;
}

[Veena]

You can fix minor styling issues with the help of chrome developer tools .

– https://developers.google.com/web/tools/chrome-devtools/iterate/inspect-styles/basics

[Ixinho]

Thank you Phoenix.
CSS worked great.
Echoing something else instead of description works great as well, i just can’t break it correctly using syntax. Should i put break tag within ” or after ?
If you can give me an example it would be great.

[Veena]

Sorry actually some auto formatting issue is happening here.
pls check the below code –

echo 'just another </br> wordpress site';

[Ixinho]

It works, but it streches my menu when i break it into two lines. Any idea how to fix that?
Also is it possible to style first line to have smaller font size?

screenshot 1 – two lines with break
screenshot 2 – one line

can i have the look as in screenshot 2 but with two lines and break?

[Ixinho]

It looks like this is the last issue remaining (i know i was boring : ) )

One more thing i noticed when i added echo text next to logo is that the image is barely clickable , only 20-30% of the logo image can be clicked and therefore homepage initiated.

Red circles on the attached picture are the only areas where the logo can be clicked

[Veena]

It works, but it streches my menu when i break it into two lines. Any idea how to fix that?

Pls change one or two menus to dropdown menus. You can easily create dropdown menus by just drag and drop in Appearance > menus .

Also is it possible to style first line to have smaller font size?

You need to enclose the first line in a span tag and apply custom CSS .
like this –

 echo '<div id="site-description">';
            echo '<span>just another</span> </br> wordpress site';
          echo '</div>';

and have this custom CSS –

#site-description span {
    font-size: 12px;
}

One more thing i noticed when i added echo text next to logo is that the image is barely clickable , only 20-30% of the logo image can be clicked and therefore homepage initiated.

#site-logo {
    z-index: 9999;
}

[Ixinho]

Thank you for your answer Phoenix. Everything works good except first thing.
Thing is when i have two lines in the description, the width of the header is increased and the logo goes above menu. Is it possible to have logo aligned with menu while keeping two lines of text next to logo?
Just look at the screenshot 1 and 2
Thank you in advance : )

[Author]

Posts