lohaus

I have the sense that you folks understand something basic which I do not (yet):

Is there a way of using @media statements to assure that the header continuously occupies the top portion of the screen, regardless of the screen size of the visiting/viewing device? And that the menu remains permanently in a drop down?

Currently, if the screen size gets large enough the logo/header minimizes and the menu items maximize to annex the abandoned space.

The install is here: m2.mossage.info.

Thanks so much!

Mo

this worked almost perfectly:

.navbar .navbar-inner {
float:right;
top: -160px;
width: 30px;
height: 30px;
}

except as the page resizes for a smaller browser window, the button leaves the page to the top, and the total height of the header, above the slider remains too large, by 50%.

can top: be set to a %?
how else to align .navbar-inner with the banner?

.navbar .nav {
max-height: 10px;
position: relative;
top: -40px;
}
yields no change

.navbar-inner {
max-width: 82%;
}

does reduce navbar width (+!!!) even down to the desired 10%
but does not allow me to put it on the same vertical band as the brand element

is something in the syntax here off:

.navbar-wrapper .brand {width:77%; float:left;}
.navbar-wrapper .navbar {width:23%; float:right}

?

@rdellconsulting

Pasting your code:

.navbar-wrapper .brand {width:23%; float:left;}
.navbar-wrapper .navbar {width:77%; float:right}

into the custom CSS box and reversing the proportions
(brand width:77%, navbar width: 23%)
got poor results for me:
the logo image is still displayed first,
then the navbar beneath it.
Even if I set them so that their total is less than 100%, same results.

Ideally I would like to have them both at the top of the page, at the same level
with the navbar large enough only to show the button (and dropdown menu).

Suggestions?

florascension.com/wordpress/

Sweet! Thanks. Worked immediately.
And the remove box around menu worked too!

The code for that was:

.navbar .navbar-inner {
-webkit-box-shadow: 0px 0px 0px;
-moz-box-shadow: 0px 0px 0px transparent;
box-shadow: 0px 0px 0px;
}

.navbar .navbar-inner {
-webkit-box-shadow: 0px 0px 0px;
-moz-box-shadow: 0px 0px 0px;
box-shadow: 0px 0px 0px transparent;
background:none
}

Here’s a follow up question or two:

Is it possible to put the menu button inline with the logo image (at that height on the page) and to redefine the navbar to be only the size of the button (not displacing the logo image mightily). Or at least to define the height of the navbar to be no greater than the height of the button (minimizing the gap between the header and the rest of the content). Looks like this involves the bootstrapper/webkit code again….

If you want to call this issue resolved, feel free. And this can be started as a new topic.

Bless your feet!