How can I put a side-to-side line below the menu bar?

  • Hi there!

    I need to put a line below the menu bar that occupies the entire width of the page. The line I was able to get so far is appearing only below each word of the menu, however, I need a continuous line, that goes from one extremity to another.

    This is the code I’m using, but it DOESN’T do what I want:

    .nav-menu li a {
    border-bottom: 2px solid #838383;
    }

    I’m using Twenty Thirteen theme and already have a child theme. Could anyone help me out please?

    Thanks!

Viewing 5 replies - 1 through 5 (of 5 total)

  • You are applying it on teh incorrect element. If you use this code

    .navbar {
  border-bottom: 2px solid #838383;
}

    That ^^^ will work and go all the way across the width of the menu

    Thread Starter Thebigspire

    (@thebigspire)

    Hi innuvo!

    Thank you very much! It works perfectly.

    If I wanted the line to be doubled, do you have any idea of how to do it?

    Regards.

    You can set a double border the same way:

    .navbar {
  border-bottom: 5px double #838383;
}

    The downside to this method, though, is that the distance between the double borders is determined by the width of the border itself, so you have to set a wide border in order to see any significant change.

    For more flexibility, try this code instead:

    .navbar {
	border-bottom: 2px solid #838383;
	position: relative;
}

.navbar:after {
	content: ' ';
	border-bottom: 2px solid #838383;
	position: absolute;
	bottom: -8px;
	width: 100%;
}

    Changing the bottom attribute will let you adjust the distance between the lines.

    you can change the line height by modifying 2px value to 4px etc

    Thread Starter Thebigspire

    (@thebigspire)

    Stephencottontail, the second code worked just PERFECTLY! Thank you very much indeed!

    Eboxnet, thanks a lot you too!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘How can I put a side-to-side line below the menu bar?’ is closed to new replies.