narrower header 'menu bar'

journalsoftheworld · Member · Mar 29, 2016 at 3:53 pm
Copy link

Add topic to favorites
Hi, i would like to put the title of the website ‘journals of the world’ to the right of the logo rather than underneath it, and also would like to make the header smaller (narrower).

thank you

The blog I need help with is: (visible only to logged in users)
charliescheer · Member · Mar 29, 2016 at 10:48 pm
Copy link
Hello,

With the way that the Logo and title are set up in your site, there isn’t a good way to move the Title to the right of the logo with CSS.

Making the header smaller is also a little bit tricky, with all of the things that are currently in it. You can take of the top and bottom padding, and that will make it a little bit smaller. To do that add this text to your CSS Customization page.

.site-header{
padding-top: 0px;
padding-bottom: 0px;
}

Hope this helps, let me know if you have any questions.
journalsoftheworld · Member · Apr 2, 2016 at 9:01 pm
Copy link
thanks it worked! would be cool to move the title but thats fine, could you help out with my contact form,
i would like to centralise the 3 boxes, and make the boarders a bit thicker for the boxes where you fill the info in, and also centralise the ‘submit’ button?

thank you!
journalsoftheworld · Member · Apr 2, 2016 at 9:30 pm
Copy link
hi i managed to move the title, purely through guess work as i have no idea how to use CSS but managed to do it, just wondering if now i can make the header narrower, and also have everything in the header all aligned?

thank you!
thesacredpath · Member · Apr 4, 2016 at 7:47 pm
Copy link
Hi, on your contact form, give this a try and see if this gets you what you are looking for.
```
.contact-form {
    text-align: center;
}
```
thesacredpath · Member · Apr 4, 2016 at 7:58 pm
Copy link
On the top header area alignment, try the following. I’ve used a Media Query to limit this to 961px and wider screens so that it doesn’t interfere with the touch device menu positioning at 960px and narrower.
```
@media screen and (min-width: 961px) {
#site-navigation {
    position: relative;
    top: -15px;
}
}
```
journalsoftheworld · Member · Apr 5, 2016 at 3:24 pm
Copy link
thank you ! it worked great.

is there anyway of making the header slightly narrower (pulling the bottom up a bit)

thanks again.
carladoria · Member · Apr 5, 2016 at 4:58 pm
Copy link
Hi there,
You can make the header narrower (vertically) by adding this CSS:

@media only screen and (max-width: 1600px)
.site-banner-media {
padding-bottom: 400px;
}
journalsoftheworld · Member · Apr 5, 2016 at 5:13 pm
Copy link
hi, didn’t seem to work but thank you!
carladoria · Member · Apr 5, 2016 at 6:10 pm
Copy link
Hi,
Sorry the CSS above is to make the header “image” smaller.
The Header (the one that contains your site logo, title and menu) will get narrower by adding this CSS:

.site-header:before {
background-color: #193441;
height: 80%;
}

You can change the percentage to change the size.
Hope this works.
thesacredpath · Member · Apr 7, 2016 at 8:11 pm
Copy link
@journalsoftheworld, I see you have added the above code and adjusted the height to 75%. I’m going to go ahead and mark this as resolved, but if you have further questions on this issue, feel free to post back here.

@carladoria, many thanks for your help in the forums. It is greatly appreciated. :)

No items found.