Switching order of menu and banner

beersbitsandbombs · Member · Feb 24, 2014 at 6:54 am
Copy link

Add topic to favorites
Hi!

I would like to change the order of my banner and my menu in my Suits theme site. I want the menu to appear right below the title and description and then the banner to appear right below the menu. What CSS code should I use to do this?

http://beersbitsandbombs.com/

Thanks!

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Feb 24, 2014 at 8:27 pm
Copy link
Hi, are you wanting everything to stay in the black area at the top? The reason I’m asking is that my first thought was to move the header into .site-main and then add padding to space the content down below the image and then it would be a simple matter of adjusting the height of .site-header to get the menu up below the title/description.
beersbitsandbombs · Member · Feb 25, 2014 at 4:36 am
Copy link
Thanks for helping me with this! Yes, I’d like everything to stay black at the top. I’m very new to CSS. How do I move the header into .site-main and then do the other things you suggested?
thesacredpath · Member · Feb 25, 2014 at 3:41 pm
Copy link
I see you have removed deleted the header image from your media library. I was in the middle of working out the code for you.

If you decide to use a header image, post back here after adding it back in and I’ll work out the code. This can be tricky on responsive width themes and I might have to limit the movement to a certain browser window width or wider.
beersbitsandbombs · Member · Feb 26, 2014 at 4:02 am
Copy link
Sorry about that. I accidentally deleted the wrong file. The header image is back up there.
thesacredpath · Member · Feb 27, 2014 at 3:28 pm
Copy link
Hi and thanks. Give the following a try and see what you think. I’ve combined the two .site-header rules you currently have in your CSS, so you can delete these two.
```
.site-header {
    height: 280px;
}
```
Delete the other one (with the image URL) and replace it with the following (second rule in new).
```
.site-header {
    background: url("http://beersbitsandbombs.files.wordpress.com/2014/02/cropped-banner_01.png") no-repeat scroll center 215px #000000;
    height: 480px;
    position: relative;
}
#navbar {
    position: relative;
    top: -100px;
}
```
Because this is a responsive width theme, I’ve also made the following rules to keep the title and description from colliding with the relocated menu and image at smaller display widths or browser window settings.
```
@media screen and (max-width: 959px) {
    .site-title {
        font-size: 5rem
    }
}
@media screen and (max-width: 378px) {
    .site-title {
        font-size: 2.5em
    }
    .site-description {
        font-size: 12px
    }
}
```
After adding, narrow and widen your browser window and view on a phone (and tablet if you have one) to see how everything looks, and check in portrait and in landscape orientations too.
beersbitsandbombs · Member · Feb 28, 2014 at 3:13 am
Copy link
Thank you! I was able to play around with the code a bit and get everything perfect. Seeing how that little bit of code works actually helps me a lot in understanding how CSS works.
thesacredpath · Member · Mar 3, 2014 at 4:06 pm
Copy link
That is great, and you are welcome.

No items found.