Customize mobile header

Posted in: Newspaper
Post count: 23
JDF
#73706
Oct 12, 2015 at 4:21 am

Hello,

I would like to customize the mobile header of my newspaper website.
http://www.journaldufranc.com

I wish to have the logo centered in the middle of the header, and being able to set its width and height.
Also, I would like to have the search logo on the right. So it will be better balanced.

Could you please tell me how to set this ?
Many thanks.

Post count: 22421
Bogdan B.
#73807
Oct 12, 2015 at 2:01 pm

Hello,
You can adjust these settings using custom CSS.
Here is a sample of how you can achieve this. It may need a few adjustments, but this is how it can be done:

@media (max-width: 767px){
.blog-stack #td-top-search {
position:absolute!important;
right: 0px!important;
top: 0px!important;
}
.blog-stack .header-search-wrap .dropdown-menu{
left:-270px!important;
}
.header-style-3 .container-fluid{
position:relative!important;
left:-45%
}
.header-style-3 .td-logo img{
width: 35px!important;
}
}

result: http://screencast.com/t/EyBNNZ6vgj
Thank you!

Post count: 23
JDF
#73899
Oct 12, 2015 at 9:33 pm

Thanks this is perfect.
I have another request should I open a new topic ?

Please check the mobile layout of http://www.clique.tv
When clicking on menu they have set a background image on each section

I tried to make a css rule but could not figure the element ID of the menu (for ex /?cat=88)
Thanks

Post count: 22421
Bogdan B.
#73984
Oct 13, 2015 at 10:59 am

Hi,

You can use the browser inspector to find these: http://screencast.com/t/nwHehLuw3
The menu id’s are named: menu-item-x where x is the specific number for each menu item. These are the ones you have to target.

Thank you!

Viewing 4 posts - 1 through 4 (of 4 total)
You must be logged in to reply to this topic.