Max-width border line for main menu

Hello,

I'm trying to make max-with border line for the main menu like techcrunch:
http://goo.gl/5XfJOf

I don't want to extend the width of the menu bar, just want to draw full width top and bottom borders. Is it possible?

Thanks,
Giang Anh

You might create a background image (png 1px wide) that would be added to body element and would repeat horizontally creating a horizontal line.

Could you please guide me, I'm not developer ^_^

Could you please post an url to your site?

Hi,

http://lamgame.vn

Thanks,
Giang Anh

Please edit: /templates/gk_news2/css/override.css and add at its end:

Code: Select all

body {
background: #fff url('../images/bgimage.png') 0 0 repeat-x;
}


Now create a new image with white background and 1px of line colour on the bottom (its height you need to find on try and error approach, I would start with something like 120px of white and 1px of dark, width should be 1px) and place it inside template folder - into images subfolder as bgimage.png.

Remember to enable "CSS override" in template settings - advanced section.

Already added the code and image but it shows nothing in front end. Please help.

Thanks.

It showed but is very bad for mobile view: http://goo.gl/z4rwnW

Just remove it under 1296px width:

Code: Select all

@media (max-width: 1296px) {
body {
background: none;
}
}


Thank you. So I guess if I want to have top and bottom border lines, I must add a black dot in the top of the image also?

Try to experiment with the image. As it is repeated horizontally you should find out what needs to be done . Making change to image and uploading it to server takes much less time than asking on forum .