Jump to content

Increase Header Size

Featured Replies

Posted

I hope this is the right place to ask this. I am new here. I have Pages And Forums and have added an image header. I am not using a logo so the forum moves up into the header space. I would like to change that by increasing the size of the header and could not find where to do that. I tried looking at ipsPageHeader and was not able to make any changes that worked. Since I am not too technical I would love some advice. Thanks!

You could add

#ipsLayout_header header {
    height: 200px;
}

to your custom.css css template to set the height to 200 px

Hi!

I'm having trouble visualising what you mean. Could you post a screenshot, please?

Edit: Posted at the same time as Daniel.

  • Author

The code helped a little. This image should not have a logo because I deleted it but it seems that when I switched themes the styling of the last theme remained even after I deleted the theme. Do you know how I fix this? Thanks for helping.

Screen Shot 2017-07-11 at 10.07.06 AM.png

  • Author

I redid the theme and this is how it looks now - much better. Still in the early stages but at least the forum is not way up at the top of the page.

Screen Shot 2017-07-11 at 10.23.04 AM.png

Two suggestions:

1. I would actually discourage you from pushing down the forums from the header.  The vast majority of web traffic is through mobile, and by pushing down the forums you are increasing the amount of mobile scroll until clients reach 'useful' information.  IPS already forces menu items on mobile on their default theme, and adding more padding to the header will only augment the unnecessary header space.  Every website will have a different audiences and different device usage, but I've seen firsthand how my website's mobile traffic (based upon Google Analytics) has exploded from 15% to 60%.  As such, every admin should intelligently design for mobile first and PC second.  

2.  Your logo "Sensitive Evolution" looks nice.  Make sure you save the logo as a PNG with a transparent background.  This will allow you to have the logo without the white background.

 

Archived

This topic is now archived and is closed to further replies.

Recently Browsing 0

  • No registered users viewing this page.