Header and menu in Adelle theme

yasminelshayal · Member · Dec 30, 2015 at 8:45 pm
Copy link

Add topic to favorites
Hi,

I’m using adelle theme and can’t get the menu to be the same length(size) as the header image

and also is it possible to have a thin line separating content area from widget area running the same length of the widget area?

Thank you

The blog I need help with is: (visible only to logged in users)
starxedsteph · Member · Dec 31, 2015 at 1:09 am
Copy link
Hi there!

Do you want to add space between the menu items so they appear full justified? We could add padding between them but that won’t give you a consistent look across different browsers. It could cause some issues in different browsers and won’t be responsive to any future changes to your menu.

This code will add a little space between your menu items. You can adjust the numbers to the spacing you prefer.
```
.navigation-main a {
    padding: 1em 2em 1em 2em;
}
```
Here is code that will create the thin line along side the side of the sidebar widget:
```
div#secondary.widget-area {
    border-left: 1px solid;
}
```
thesacredpath · Member · Dec 31, 2015 at 1:11 am
Copy link
Hi, give the following a try, which seems to me to look better than making the menu narrower given that in that case the menu and header would be narrower than the content area. This makes the header image the same width as everything else.
```
.site-header img {
    width: 100%;
}
```
thesacredpath · Member · Dec 31, 2015 at 1:12 am
Copy link
@starxedsteph beat me to it. :)
yasminelshayal · Member · Dec 31, 2015 at 7:00 am
Copy link
you guys are brilliant! it all worked :)

Just one last thing, can i shorten the separator between widgets so they is space between the vertical long line and the small horizontal lines?

Thanks again, and Happy new year 2016 from Dubai!
yasminelshayal · Member · Dec 31, 2015 at 7:36 am
Copy link
One more thing, how do I get my whole blog to be less in size, if i am making any sense, if you take a look at this blog http://balanceorbustamove.com/, the whole blog looks smaller, and the background is showing, where my blog appears bigger even when i applied a different color background (just to see how it looks).

I hope i am making any sense.

Thank you.
Yasmine
thesacredpath · Member · Jan 1, 2016 at 7:50 pm
Copy link
To make your site narrower, like the site you reference, add the following and then adjust the 63.75em max width as desired.
```
.site {
    max-width: 63.75em;
}
```
thesacredpath · Member · Jan 1, 2016 at 8:03 pm
Copy link
Yasmine, one other thing I’ll mention is that pixels are a whole number value, so font sizes and anything in pixels should really be set as something like 17px instead of something like 16.9px. Pixels on screens really can’t be split into decimal sizes. Having decimal pixel sizes for fonts or any sort of spacing (padding, margin, etc.) could result in strange things happening on some browsers. In general, it probably isn’t an issue, but just to be one the safe side, I always suggest whole numbers for any pixel dimension.
yasminelshayal · Member · Jan 1, 2016 at 8:42 pm
Copy link
Thank you so much for your reply and tip :) i will go through all pixels in my few CSS to see if i have any pixels not as whole numbers.

One last thing, is how to shorten the horizontal line separating widgets so it’s not touching the vertical line i added to separate site fro widget area.

Thank you again!
Yasmine
thesacredpath · Member · Jan 5, 2016 at 9:11 pm
Copy link
On the widgets, we can reduce the padding on left and right and add it as left margin so to get a gap between the vertical and horizontal lines.
```
.widget {
    padding-left: 1em;
    margin-left: 1.538em;
    padding-right: 1em;
}
```
yasminelshayal · Member · Jan 5, 2016 at 9:23 pm
Copy link
Thank you so much, it works perfectly!
thesacredpath · Member · Jan 5, 2016 at 11:35 pm
Copy link
You are welcome.

No items found.