Re: [Tikiwiki-artwork] fixed-navbar different heights on changing viewports is taking space from header

[Gary Cunningham-L. <ga...@cu...>]

Hi,

I'm not sure if you mean the problem is at various static screen sizes, 
or during movement from one size to another.

If you mean the first thing, to accommodate the navbar height increases 
at the display-width breakpoints, then the page-top margin can be set 
for each display width.

http://stackoverflow.com/questions/18796505/bootstrap-3-0-media-queries
(Note that the code on this page is for when Less is used to compile the 
style sheet. To use the statements directly in CSS, replace the 
variables with the pixel values defined for the breakpoints in the theme 
stylesheet that you're using.)

This seems like it'd work ok for large and medium-sized displays, but 
you might want to use another solution for small devices. It probably 
isn't good to have a multiple-wrapping navbar in a screen that's small 
to begin with. Not much room would be left for content. Here maybbe it 
would be good to hide some modules with Bootstrap div visible/hidden 
classes, etc.

If the problem is that the navbar wrapping and the page adjustment under 
it don't seem to be in sync as you narrow and widen the browser window, 
I think the main thing to check is how the page loads in a window that 
isn't being resized. Most people don't slide their pages narrow and wide 
to see what problems they can expose. I'd say just check the site at the 
various breakpoints/screen sizes. After all, the point is to have a good 
view for visitors using various sized displays (which are static size 
except for the portrait/landscape rotation). Firefox (the developer 
edition) has a menu item for this, to make the browser window the 
various display sizes.

-- Gary



On 8/2/2015 6:17 AM, Torsten Fabricius wrote:
> Hello collegues,
>
> from time to time I think about the following problem and want to find a
> general solution:
>
> When I use a fixed navbar, the navbar goes over the header, instead of
> staying on top, meaning that I have to put a margin-top to either the
> body or the header.
>
> When I change the viewport, respectively shrink the screen, likely the
> height of the navbar changes before the viewport, where it finally
> collapses. For one specific Website I could figure out the actual width,
> when the navbar changes to two lines depending on the amount of content
> (li elements and width of those). Then I could alter the behaviour of
> the specific fixed-navbar in context with media queries.
>
> I find this an odd solution and am looking for something that gives the
> fixed-navbar the space it needs instead of "stealing" space from the
> next element (likely the header, when I use the fixed-navbar as a
> metanavigation or so).
>
> Any ideas for that?
>
> Feedback appreciated.
>
> Best regards,
> Torsten
>
>
>
>
>
>
> ------------------------------------------------------------------------------
> _______________________________________________
> Tikiwiki-artwork mailing list
> Tik...@li...
> https://lists.sourceforge.net/lists/listinfo/tikiwiki-artwork
>