Placing a text in the topbar

[serenne]

I am trying to put a text (a title) in the topbar.

But difficult fight with the css ...

Do you have some example with the best way to do it ?

Kindest regards
Philippe

[mert.sincan]

Maybe, you can try the following code;
//topbar.xhtml

Code: Select all

<div class="topbar clearfix">
        <div class="topbar-left">            
            <div class="logo"></div>
        </div>
        
        <div class="topbar-right">
            <a id="menu-button" href="#">
                <i></i>
            </a>
            
            <h:outputText value="My Text" style="color:white; font-size: 20px; position: relative; top: 8px;" />
           
           <a id="topbar-menu-button" href="#">
                <i class="material-icons">&#xE5D2;</i>
            </a>
            ...
      </div>
</div>

[serenne]

Thanks Aragorn,

Works much more better than what I tried before.
Still some problems when resizing the width on deskktop (go on 2 lines), not perfect on tablet (last word written over the menu button in portrait mode) (but I should say my my text is quite long : 4 words )

but works fine on smartphone (no title displayed at all)

[mert.sincan]

Could you please attach screenshots for us to replicate? Also, you can use @media query rules for the different device size; https://www.w3schools.com/cssref/css3_pr_mediaquery.asp