Dara CSS Customization (few questions)

twinmommel · Member · Mar 23, 2018 at 8:35 pm
Copy link

Add topic to favorites
Few questions regarding site: TwinMomMel.com or TwinMomMel.Wordpress.com

1. On Mobile, how can I get rid of the dark black line on the featured content? I don’t see this when I’m viewing on a desktop, only on a mobile device

2. How can I reduce the top and bottom spacing in the header?

3. Is there a way to get a fixed menu bar?

4. How can I shrink the size of the menu bar?

The blog I need help with is: (visible only to logged in users)
mouli · Staff · Mar 24, 2018 at 6:55 am
Copy link
Hi
The black bar appears because the featured content area seems to have a minimum height of 180px and a black background so as the image adjusts its size for a smaller screen the background is revealed.
This might not be such a bad thing as the white text moves over it and it still visible.

The top and bottom spacing on the header can be adjusted in the Additional CSS section of the customizer but you will need a premium plan to have access to that.
If you do you can use the following:
```
.site-branding {
	padding: 2.4em 0;
}
```
Adjust the 2.4em which is top and bottom padding.

As to a fixed menu bar I’m not sure that this is an option in the Free version and I can’t confirm that it is available in the premium version either.

Similarly the depth of the nav bar can be adjusted using Additional CSS as follows:
```
.main-navigation ul li {
	padding: .4em 0 .4em .8em;
}
```
The values represent in order top, right, bottom and left so reducing the 2 values of 0.4em will compact the nav bar.

Well that’s a start anyway.
twinmommel · Member · Mar 25, 2018 at 4:34 am
Copy link
Thank you! I do have the premium version so I was able to make the header padding changes and Nav Bar changes.
mouli · Staff · Mar 25, 2018 at 4:50 am
Copy link
My pleasure to be of assistance.
Maybe someone else might have some ideas about the black background to the Featured Content Area :)
twinmommel · Member · Mar 25, 2018 at 4:54 am
Copy link
Mouli – Now that you’ve explained the minimum height, it may be better to leave it that way. It’s only on the mobile, and you make a very good point about the white text. So the black background is benefiting me and my readers.

Now the fixed menu bar will be neat to know. It’s actually a fixed header and menu bar. That would be ideal…
mouli · Staff · Mar 25, 2018 at 4:58 am
Copy link
I had a quick look at the fixed menu too and came up with this:
```
#site-navigation {
	position: fixed;
	top: 32px;
	width: 100%;
	box-sizing: border-box;
	padding: 0;
	z-index: 1000;
	max-width: 1180px;
}
```
It seems to do the trick but might need some refinement for mobiles.
Anyway let me know how you get on.
twinmommel · Member · Mar 25, 2018 at 7:58 pm
Copy link
Mouli Thank you! I put the fixed menu all the way up top. The mobile view only cuts off the top header pic a smidgen (which is completely doable) for the purpose of my site. Thank you so much for your help!!!!!

~Melanie
mouli · Staff · Mar 25, 2018 at 9:03 pm
Copy link
Hi
Its my pleasure.
I did notice that when I view your site when logged into WordPress the top WordPress admin bar covers your menu but this is only a problem if you are logged into WordPress.
For normal viewers its fine however it’s annoying so add this to your CSS:
```
.logged-in #site-navigation {
	top: 30px;
}
```
mouli · Staff · Mar 25, 2018 at 9:18 pm
Copy link
and update the rule that I sent for fixing the menu as follows. It makes it full width which is tidier and more consistent:
```
#site-navigation {
	position: fixed;
	top: 0;
	width: 100%;
	box-sizing: border-box;
	padding: 0;
	z-index: 1000;
	left: 0;
}
```
So I have removed the max-width and added left:0

Now i think we might be done :)
twinmommel · Member · Mar 26, 2018 at 12:56 am
Copy link
The additional CSS for wordpress viewers has been added. Thank you!

I didn’t quite understand the other piece that you sent. I replaced the old rule with the new one that you recently sent, but I didn’t see a difference anywhere…
mouli · Staff · Mar 26, 2018 at 1:08 am
Copy link
What browser are you using?
It always worked in Chrome but in Firefox it misbehaved so the updated code was to solve that issue.
So if you are using Chrome you won’t notice any difference.
Glad that it is working for you
twinmommel · Member · Mar 26, 2018 at 2:56 am
Copy link
I was using Chrome (windows PC), and Safari (both iPad and iPhone).
Thanks for explaining Firefox.
mouli · Staff · Mar 26, 2018 at 3:21 am
Copy link
No worries.
Glad to help.

No items found.