Line before and after UL navigation

Question

I should add a horizontal line on both sides of a centered UL menu. There's background image on the page so the solution must have a transparent background. The lines must reach the sides of screen. I have seen few examples, https://stackoverflow.com/a/23584310/4266235 is pretty close to what I need.

But I've got one difference which I cannot solve. On the front page I have a large logo under the menu, but on all other pages the logo is smaller and on the left side of the menu.

This is what I want:

Front page:

|-------- Home Page1 ... PageN --------|
|     [Large logo]                     |

All other pages:

|---- [small logo] Home Page1 ... PageN ----|

The first problem is that the small logo is done using ul:before. Something like

#navi { margin: 0; text-align: center; }
#navi ul { list-style-type: none; }
#navi ul:before { display: inline-block; content: url("small-logo.png"); vertical-align: middle;}
.front-page #navi ul:before { content: ""; }

where the front page has <body class="front-page">

If I use <img> instead for the small logo I can get lines work quite well on the front page, but on the other pages the left one continues too close to the menu. Obviously because I could not figure out how to stop it before the logo. With quite well I mean that I have to change percentages in the answer I linked to get them reach window border, but even with 100 % they won't touch the border if I zoom the page with CTRL-minus.

Edit: Here's a fiddle example https://jsfiddle.net/sowcoox1/ The red line should appear on the left side too. If there's a logo image the line should stop before, if not, then stop before the Home text. Additionally, the line seems to reach the screen border, but if you zoom out, it turns out the line is not long enough.

Would appreciate if you have a [fiddle](https://jsfiddle.net/) of that — Carl Binalla, Mar 28 '17 at 02:13
Thanks Carl and Dierig, I added a fiddle that should show what I'm trying to do. — robblond, Mar 28 '17 at 08:05

score 0 · Answer 1 · answered Mar 28 '17 at 08:18

You could create the line as a background-image for the wrapper element, and give the ul element a background that covers up the line behind it:

https://jsfiddle.net/sowcoox1/1/

If you can't give the ul a background color, you could work with multiple background-images in the wrapper element, or use a separate element for the line. This will be much easier if you know how wide the ul will be.

Line before and after UL navigation

1 Answers1