Theme Not Showing The Entire Text Based Logo

Hi there,

I'm not seeing the issue on the page linked.

The title is currently Obsession is showing in full.

Can you make the issue display for us to see?

Thanks!

Obsession is not the full name. That's only the middle word.

Hi there,

go to Customizer > Additional CSS and look for this:

#site-navigation .navigation-branding {
    transform: rotate(90deg);
    display: block;
    height: 100%;
    margin: 30px 0 auto;
}

and replace it with:

#site-navigation .navigation-branding {
    display: block;
    height: 100%;
    margin: 30px 0 auto;
    writing-mode: vertical-rl;
}

Thanks it worked. Is it possible to rotate/flip the logo in the other direction so it reads better. Currently it reads from top to bottom and I would like it to read from bottom to top?

I attached some images for you to see the views in which I am describing

Change the CSS to flip the text:

#site-navigation .navigation-branding {
    display: block;
    height: 100%;
    margin: 30px 0 auto;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

To stack the text you would do this instead.... but it looks absolutely terrible:

#site-navigation .navigation-branding {
    display: block;
    height: 100%;
    margin: 30px 0 auto;
    writing-mode: vertical-rl;
    text-orientation: upright;
}

Thanks for the advice I tried them both and Yes the flip the text option is the best. But when I did it the logo moved from the top position to the bottom of the template. Why is that?

Hi there,

I don't see a logo in your site currently, but you can try this CSS instead, so the CSS only work on the title not logo.

#site-navigation .navigation-branding .main-title {
    display: block;
    height: 100%;
    margin: 30px 0 auto;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

Sorry not logo, I meant to say text. But I just sent a link to give you a better understanding of what I was trying to say and what I want. I tried the CSS but that's not it

Oh I see!

Try to replace this CSS:

#site-navigation .navigation-branding {
    display: block;
    height: 100%;
    margin: 30px 0 auto;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

with this:

#site-navigation .navigation-branding p a {
    transform: rotate( 
180deg
 );
}
#site-navigation .navigation-branding {
    display: inline-flex;
    height: 100%;
    margin: 30px 0 auto;
    writing-mode: vertical-rl;
}

Let me know how it works!

It worked perfectly. But I now noticed that I am unable to see my primary navigation home button is missing. It was located from below, the opposite side of the text logo

Change this part of CSS:

#site-navigation .navigation-branding {
    display: inline-flex;
    height: 100%;
    margin: 30px 0 auto;
    writing-mode: vertical-rl;
}

to this:

#site-navigation .navigation-branding {
    display: inline-flex;
    margin: 30px 0 auto;
    writing-mode: vertical-rl;
}

Let me know :)