Move header and menu bar

timogill · Member · Feb 20, 2015 at 2:30 pm
Copy link

Add topic to favorites
Hi there, i’d like to use CSS to move the banner right to the top of each page, ideally above the menu bar. I feel like there is too much empty white space on each page and i’d like to remove as much as possible

Hope someone can help

Thanks

Tim

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Feb 20, 2015 at 10:47 pm
Copy link
Hi Tim, the header image is in the overall container for the content area, rather than in the same div container for the menu and search box, so on Chronicle, which is a responsive design that adapts for all screen and window sizes, this would be problematic. We can give it a try, but I would first suggest trying the following, which moves the search box to the right and tightens up the top spacing. I’ve used a media query to limit this change to screens/windows 500px and wider since that is when the touch device menu activates and things go sort of awry. Give the following a try and see what you think.
```
@media screen and (min-width: 500px) {
.masthead .container {
    position: absolute;
    right: 0;
}
.masthead .search-wrapper {
    float: right;
}
.container .header-image {
    margin-top: -50px;
}
  .masthead {
    background-color: transparent;
  }
}
```
timogill · Member · Feb 23, 2015 at 12:52 pm
Copy link
Hi there, thanks very much for your help. This looks much better and is almost perfect

https://eastlondonqi.wordpress.com/

Can you think of a way to bring the search box in a little on the left hand side? Or maybe just shrink the width of it a bit.

Many thanks again

Tim
thesacredpath · Member · Feb 23, 2015 at 10:25 pm
Copy link
You are welcome, and add the following into the media query we added (before the last ending { (35px is what it is set at originally)
```
.masthead .search-wrapper {
padding-right: 35px;
}
```

No items found.