Set Menu & Header Width to 100% - Responsive Theme Discussions on ThemeID: Support Community

mss

I'd like to set menu & header width to 100%.
I tried the method in this thread:

http://themeid.com/forum/topic/614/how-to-have-the-top-menu-100-wide/

. . . but it didn't work.

Responsive Version: 1.8.0.1
WordPress Version: 3.4.2

Emil Uzelac

.menu {
    position: fixed;
    top: 0;
    z-index: 9999;
    width: 100%;
}

Try that please

Emil

mss wrote:

I'd like to set menu & header width to 100%.
I tried the method in this thread:

http://themeid.com/forum/topic/614/how-to-have-the-top-menu-100-wide/

. . . but it didn't work.

Responsive Version: 1.8.0.1
WordPress Version: 3.4.2

Emil Uzelac

What's the URL please, here's the demo with the same setup and no scroll: http://socialcafemag.com

Thanks,
Emil

mss wrote:

Unfortunately, that didn't work.
Here is a screenshot:

http://minus.com/ly0v76sbqnEeg

The menu is technically 100%, but you have to
use the horizontal scroll bar to see the rest of it.

mss

The URL is http://hermesmo.altervista.org/.

Emil Uzelac

Hi,

Just checked your site with IE7, IE8 and IE9 http://imgur.com/a/Vs57x and can't see the scroll

Thanks,
Emil

mss wrote:

The URL is http://hermesmo.altervista.org/.

mss

Your screenshots show the problem - the menu doesn't fully extend to the left.

Here's an image I took from Chrome: http://minus.com/lqZT1N2Zflm5o

Note that only one side of the menu fully extends . . .

Maybe I've done something wrong. Here's the CSS for .menu:

.menu {
    background-color: #585858;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#585858), to(#3d3d3d));
    background-image: -webkit-linear-gradient(top, #585858, #3d3d3d);
    background-image: -moz-linear-gradient(top, #585858, #3d3d3d);
    background-image: -ms-linear-gradient(top, #585858, #3d3d3d);
    background-image: -o-linear-gradient(top, #585858, #3d3d3d);
    background-image: linear-gradient(top, #585858, #3d3d3d);
    clear: both;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#585858, endColorstr=#3d3d3d);
    margin: 0 auto;
    position: fixed;
    top: 0;
    z-index: 9999;
    width: 100%;
}

Emil Uzelac

Correct, but no horizontal scroll.

And we can continue like this:

.menu {
    left: 0;
    margin: 0 auto;
    position: fixed;
    width: 100%;
    z-index: 999;
}

#logo {
    margin-top: 33px;
}

Thanks,
Emil

mss wrote:

Your screenshots show the problem - the menu doesn't fully extend to the left.

Here's an image I took from Chrome: http://minus.com/lqZT1N2Zflm5o

Note that only one side of the menu fully extends . . .

Maybe I've done something wrong. Here's the CSS for .menu:

.menu {
    background-color: #585858;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#585858), to(#3d3d3d));
    background-image: -webkit-linear-gradient(top, #585858, #3d3d3d);
    background-image: -moz-linear-gradient(top, #585858, #3d3d3d);
    background-image: -ms-linear-gradient(top, #585858, #3d3d3d);
    background-image: -o-linear-gradient(top, #585858, #3d3d3d);
    background-image: linear-gradient(top, #585858, #3d3d3d);
    clear: both;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#585858, endColorstr=#3d3d3d);
    margin: 0 auto;
    position: fixed;
    top: 0;
    z-index: 9999;
    width: 100%;
}

mss

Thanks, Emil!
' left: 0;' seems to have fixed it.

I have one additional question - is it possible to overlay the logo onto the menu?

Emil Uzelac

change menu:

z-index: 999;

and try:

#logo {
    position: fixed;
    z-index: 9999;
}

Emil

mss wrote:

Thanks, Emil!
' left: 0;' seems to have fixed it.

I have one additional question - is it possible to overlay the logo onto the menu?

Howdy, Stranger!

Categories

In this Discussion

Most Popular This Week