Navigation bar title overlap with right buttons


#1

I have four buttons which are right-aligned on the navigation bar and title in center. The title text is bigger and it’s overlapping with right buttons. How can I set title width so that it shows the three ellipses when text is overflowing?


#2

Here’s Ionic docs on the header. You can use the default classes or add Your own and just add proper CSS. If You need more info about the needed CSS take a look here


#3

Can you please suggest default classes so that i can test with them. I applied custom css but it’s not good for different different screens.


#4

Default classes are only needed to point to the element You are styling :wink: There is no default ellipsis in Ionic’s header (as far as I know).

I understand Your concern with different screen sizes though. What You should try to do is write Your CSS percentage-based. So for example, instead of setting Your middle text to for example 150px You should set it to for example 30%. Of course I don’t see Your app so I’m kind of guessing :smile:
As far as width on different screen sizes is concerned implementing percentage-based styles usually fixes most issues. You can consider using a CSS grid system, for example:
http://purecss.io/grids/
http://960.gs/

If You choose a grid than You can control the size of Your header with classes.

I hope You find what You need!