I want to display the title of the site, but seem to be no header including the title field… The only way to show the title is as part of the logo?
Hello,
Please provide more details to exactly where you want to show the title of the website? Do you want to show it across the whole site? or just the homepage?
Thank you!
Thanks for answering, Bogdan.
Yes, accross the whole site.
One solution I thought of was to create an additional element with the title tag in the secondary menu, which it’s in the Top bar (I’m using Header Style 1 – Multipurpose and Top bar Style 1). Then format that element (center it, change its font to a larger one, etc.) through CSS, BUT it would not appear in the mobiles’ main screen because the Top bar and the secondary menu are hidden in that cases.
I suppose I could use the space reserved for the ads in some header styles (may be “widgetizing” it with some plugin), but in my preferred style I haven’t got that space to the right anyway (http://migueldimase.com/).
Another way would be to add another bar between the Top bar and the header, just for the title. The downside would be a longer (higher) header, which I don’t like.
So, I think the ideal place would be INSIDE the header without making the header it bigger, in top of the main menu (may be decreasing its height a bit) where “Writings and readings” (the name of my site) could be displayed (in a line not too much higher/longer than the Top bar’s height).
But, ¿how can it be done?
Thanks again.
Hi,
So that title should be displayed through the whole website, in the top bar.
I see you use a multipurpose header style, you could use a multipurpose top bar style as well. This will allow you to display a text in the top bar
– https://www.screencast.com/t/zPPImXDs9di
– https://www.screencast.com/t/wsj3bOz4
– https://www.screencast.com/t/q5klb5845Yj
Or you could enter the text in the top bar style you currently use, style 1. Edit the top bar template file
– https://www.screencast.com/t/1Be89AcX
With some additional styling that may work as well.
It could also be added with a simple CSS code
– https://www.screencast.com/t/rN9SUsqnrhb
Or add it as a menu item maybe – https://www.screencast.com/t/9AaIT38iwyY
Thanks
Yes, but the problem still is that the Top bar will not show in mobiles.
But with somethink alike your solution:
#menu-principal-1:before {
content: “Escritos y lecturas”}
I achieved this: http://migueldimase.com/
¿How can I center this title WITHIN the header? (remeber: I don’t want to increase the header’s height).
Thanks
It could be centered but that may not be the best solution. A solution would be to place it in the top menu with one of the solutions mentioned above. Then I can give you a code to display the top menu on mobile
– https://www.screencast.com/t/Dj20r0Yg1Vo
This is the code for that
.td-header-sp-top-menu:after {
content:"Escritos y lecturas"
}
@media (max-width: 767px){
.td-header-sp-top-menu,
.td-header-top-menu-full {
display: block!important;
text-align:center;
}
.td-social-icon-wrap{
display:none;
}}
You could also style it if you want to – https://www.screencast.com/t/YO1f2eWnp2k
Thank you very much.
May I ask you, however, why do you say that having the title -centered- inside the header and above the menu may not be the best solution? I’d really like not be forced to display the Top bar in mobiles…
Thanks again
The way you tried it it will interfere with the main menu items, so for example if I position it over the menu items it will be part of the menu and can be clicked
– https://www.screencast.com/t/gpByZdymKvmR
So that might be a bad solution.
Maybe below the header – https://www.screencast.com/t/fKeFtsRreP
.tdm-header-style-1:after {
content:"Escritos y lecturas";
position: absolute;
text-align: center;
width: 100%;
}
Thanks for the suggestion and code about how to have the title below the header.
Yes, you’re right, the “selected title” was a problem, altough I thought there was an additional problem. But because of that I had said that the height of the menu buttons might be decreased enough to alocate the title on top of them (in the container which contains the menu’s container, for example; I don’t know).
I’ll try that…
No… I couldn’t do it…
Focusing now in the mobile version, could I change at least the img.td-retina-data logo shown at the middle of the td-header-menu for a text? (for example, the alternative text, which could be the site title)
I see you decided to place it in the top menu, with the multi-purpose style.
So on mobile you want to replace the logo with the tagline. You could try something like this maybe
– https://www.screencast.com/t/lPiiLl6ty
@media (max-width: 767px){
.td-header-top-menu-full {
display: block!important;
text-align:center;
}
.td-social-icon-wrap,
.td-mobile-logo img{
display:none;
}
div.td-header-sp-info {
margin-left:0;
position:absolute;
left:0;
top:10px;
}}
Yes, finally I decided to place the title in the top bar in big screens.
Yes! Exactly that it’s what I needed in mobiles. Thanks!
When scrolling the screen up, however, the title disappears. It re-appears when scrolling all the way down to the begining of the post/page/home or when the menu is pressed. Can be fixed?
Thanks again, Simion.
I forgot about that, sorry. Best to use position fixed in the code, instead of absolute
– https://www.screencast.com/t/6fsBHEJTY
So only modify the position in the code, from absolute to fixed. That would work.
That works perfectly… but now the menu and the search icon can’t be selected! (Ha, Ha!).
No, but now I see that’s a previous unnotice issue: if I change it back to absolute, the menu and the search can be selected BUT ONLY AFTER SCROLLING the screen (inspecting it, I see that this div has 100% width and might be “covering” those buttons…)
That seems to be the case indeed. Try it like this instead
– https://pastebin.com/A88A1Eb3
Worked well, thanks… Except with 320 widths, where the title is dividev in two lines. So, I came up with this modification, which seem to work:
@media (max-width: 767px)
div.td-header-sp-info {
width: 60% !important; /* More width to the container */
margin-left: 0;
position: fixed;
left: 21%;
right: 10%;
top: 14px;
text-align: center;
font-size: 200%; /* Adjust the size with respect to the container’s */
}
I dont know if the best possible, solution, though.
By the way, “right 10%” do something?
Thanks
Seems it does nothing, I can’t remember why exactly I used that there. You could remove the “right:10%” , maybe optimize the code more if needed. There might be better and simpler solutions to do it with enough time to experiment.
You could reduce the font used for smaller devices, that would be one way to do it to avoid breaking the text in two rows.
Thank you, Simion!
