Magazine Pro- Increase width of menu border lines

[bizchick200]

Can someone tell me how to increase the width of the line below the blog title and the line below the secondary menu? I would like the lines to be full width of the page. Also how do I change the style of the lines? I would like to be a gray gradient or shadow instead of solid black lines.

Here is my site website

Thanks!

[JanHoek]

Open your style.css and find

.site-header .wrap {
border-bottom: 2px solid #222;
padding: 30px 0;
}

change the border-bottom pixels to whatever you want (this is under your title)

Then look for

.nav-secondary .wrap {
border-bottom: 2px solid #222;
}

and do the same.

Good luck

---

Hi, my name is Jan Hoek. Sure, they all say I have a big head, but I like to think it’s way too small for all my ideas.

[Tonya]

Absolutely. You want to open up the style.css file and make the following changes:

line 1058: comment out the border-bottom style as follows (which removes the top border over the nav menu:

.site-header .wrap {
/* border-bottom: 2px solid #222; */
padding: 30px 0;
}

on line 1293: comment out the border-bottom style s follows (which remove the border below the nav menu):

.nav-secondary .wrap {
/* border-bottom: 1px solid #222; */
}

OK, now here is one iteration of a gradient type of border (there are many you can do). Go to line 1987 and add this code in:

.nav-secondary::before,
.nav-secondary::after {
	content: "";
	height: 3px;
	background: -moz-linear-gradient(left,  rgba(0,0,0,0) 0%, rgba(147,147,147,1) 50%, rgba(0,0,0,0) 100%);
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0)), color-stop(50%,rgba(147,147,147,1)), color-stop(100%,rgba(0,0,0,0)));
	background: -webkit-linear-gradient(left,  rgba(0,0,0,0) 0%,rgba(147,147,147,1) 50%,rgba(0,0,0,0) 100%);
	background: -o-linear-gradient(left,  rgba(0,0,0,0) 0%,rgba(147,147,147,1) 50%,rgba(0,0,0,0) 100%);
	background: -ms-linear-gradient(left,  rgba(0,0,0,0) 0%,rgba(147,147,147,1) 50%,rgba(0,0,0,0) 100%);
	background: linear-gradient(to right,  rgba(0,0,0,0) 0%,rgba(147,147,147,1) 50%,rgba(0,0,0,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#00000000',GradientType=1 );

	display: block;
	margin-bottom: 10px;
    margin-top: 10px;
}

You can adjust the "thickness", per sey, of the line via the "height" style. To make it more thin, decrease the number of pixels say to 1 or 2.

Have fun!
Tonya 🙂

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[bizchick200]

Thank you!! It worked but the line appearance is not really what I wanted. Can you show me how to make the lines appear like the one under the menu of this site

Thanks!

[JanHoek]

Remove the borders from the css we discus earlier. Add the border to......

.site-header {
   border-bottom: 2px solid #222;
}

.nav-secondary {
   border-bottom: 2px solid #222;
}

---

Hi, my name is Jan Hoek. Sure, they all say I have a big head, but I like to think it’s way too small for all my ideas.

[Tonya]

OK. Thank you for the example site. That helps to see what you want.

1. Delete what I had you add at line 1988.

2. Add this code instead:

.nav-secondary {
	-webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.1),0 1px 0 0 rgba(0,0,0,0.1);
	-moz-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.1),0 1px 0 0 rgba(0,0,0,0.1);
	box-shadow: 0 2px 2px 0 rgba(0,0,0,0.1),0 1px 0 0 rgba(0,0,0,0.1);
	border-top: 5px solid #ff8584;
}

3. Make sure you do the first 2 steps above to give rid of the black lines that are there now.

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[bizchick200]

Tonya,

The bottom border is exactly what I wanted. How do I get the top border to look exactly the same. I didn't want the orange color.

Thanks for all of your help!

[Tonya]

Not a problem. Make it look just like this:

.site-header,
.nav-secondary {
	-webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.1),0 1px 0 0 rgba(0,0,0,0.1);
	-moz-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.1),0 1px 0 0 rgba(0,0,0,0.1);
	box-shadow: 0 2px 2px 0 rgba(0,0,0,0.1),0 1px 0 0 rgba(0,0,0,0.1);
}

Notice that the .nav-secondary::before and border-top are both gone and I added .site-header.

Cheers!

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[bizchick200]

Worked perfectly, Tonya!! Thank you so much. Thanks also, Jan!

[Tonya]

You're welcome. 🙂 Enjoy your weekend.

@JanHoek Sorry to step on your posts. I didn't see that you had already posted after mine popped. Cheers

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[Author]

Posts