Hello,
I have some issues for the mobile display.
I’m sorry to bother, I am very bad a CSS coding.
1. I found I could set up the logo size with “max-width”, but when I do my logo is not centered anymore. How can I fix this ?
2. My header is set on sticky, but when scrolling there is just the header, no logo
3. Where can I set up the header height and border ?
5. About my .td-sp-ico-menu, I would like to set up a 20 x 20px image background. But when I do, I can not make it fit at the right size.
Website will be perfect then.
Here you can see the website
http://www.journaldufranc.com
Thanks a lot for your help.
Hello,
1. It seems you have quite a bit of css customization on the mobile logo. Please try to restore it to it’s default state and remove any custom css affecting it. Then the logo will be centered as that is the default state of the theme mobile logo.
2. The logo on the sticky menu can be set from the theme panel here: http://screencast.com/t/IEJZaYZ2FM (the header section of the theme panel)
3. The header hight cannot be set from the theme panel for the mobile version. it can only be done with css.
4?
5. Our theme does not have an option to replace the search icon with something else. Sorry. This can only be made custom
Thank you!
Thanks Bogdan.
1. I removed all the css related to the icon, but it’s not centered.
Please note I’m on an old Newspaper version. I say because when I first installed your theme I had to ask the support to center my logo. The staff gave me a custom css which I don’t understood but it worked.
2. Could you tell me how to do it simply with custom css. Since I’m still on Newspaper 4.6.1
Update is too complicated for me, I could possibly achieve it but have really no time at the moment
3. I found thanks
5. I have the following in my custom css
.td-sp-ico-menu {
background-image: url(“xxxxx.jpg”);
margin-left: 0px;
top: 4px!important;
background-color: white;
}
Now the menu is a clickable image but it size is not adjusted. Do you know how to make it fit ?
Thank you
I see you use a very old version of our theme. We suggest updating as more and more things will break from a theme that has been released 3 years ago. If you update wordpress and plugins bu not the theme, then there will be a moment when it will not work anymore. We cannot provide compatibility between the theme and wordpress if you do not update it.
1. Please use this css to center the logo
@media (max-width: 767px){
.header-style-3 .td-logo img {
position: relative;
right: 0;
top: -10px;
z-index: 3;
padding-top: 0px;
width: 180px;
margin-left: auto;
margin-right: auto;
display: table;
}
2. I cannot provide any css solution for it as it;s not added through css. il;m not even sure newspaper 4 had this option. Check the theme panel .If there is no such option in there, you can only add it custom .
5. This is how the search icon was added on newspaper 4:
.td-sp, .td-scroll-up-visible {
background-image: url(images/sprite/elements.png)!important;
}
You can change that url to your own image url and it should work
Thanks.
Hello JDF and Bogdan,
I hope you don’t mind me joining your conversation. I would like to know how you solved JDF’s issue #3 (setting mobile header height with CSS).
I have searched for how to solve this but cannot find the solution. This screenshot at this link will show you that I need to increase the height of the white-space header behind my logo and menu button: https://www.screencast.com/t/mi6La8Di
(I was not happy with the smaller size of my mobile logo with menu so I changed the CSS a little, fyi.) Thank you for any guidance you can give me on where you located this in CSS!
Nick
Hi,
Well our theme does not have any option to increase the header height so it has to be done with css. You will have to use the browser inspector and identify the correct classes to use in the css: https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/
Thanks.
Thanks! I worked it out. Your tutorial helped me get the final part done. Happy New Year!
Hi Bogdan,
I was able to increase the height of the menu for mobile as well the height of the logo on my newly developed website:
I used the following CSS for Mobile:
.td-main-menu-logo img {
max-height: 100px;
}
.td-header-wrap .td-header-main-menu {
height: 110px !important;
}
.td-main-page-wrap {
padding-top: 106px;
}
#td-top-mobile-toggle i {
line-height: 110px;
}
.header-search-wrap .td-icon-search {
line-height: 110px;
}
.td-post-template-4 .td-crumb-container {
padding-top: 52px;
}
However, When you scroll down, some of the header still shows at the top of the screen. I don’t know how to fully hide it like it hides with the default settings.
Can you please assist?
Hi,
Unfortunately this is not so easy how it looks like, you will need also js modifications for this – https://www.screencast.com/t/IWf9pKoI2
A quick solution for this would be to leave your menu always sticky.
Thanks!
Thanks Alin.
