Go to the following Foundation CSS framework documentation url:
http://foundation.zurb.com/docs/navigation.php
In the section named Nav Bar you will see an example for horizontal navigation bar. Now try to gradually minimize the browser's window, when the window is minimized enough (to be like mobile devices resolution) you will notice that horizontal navigation bar is turned into vertical navigation bar. I need to know the technical definition for this behavior occurred to the menu.
I believe you are looking for responsive web design; which is design that adapts based on the user agent's viewport.
Twitter's bootstrap framework for example, has responsive design built-in.
I've reproduced that effect using width: auto; float:left for each menu item, and on resize event I'm checking if all the items are aligned at their top. If the items are not aligned, I'm modifying to width:100%
here is an example of what I got: www.gabitzish.com (see menu)
Related
I'm trying to build a page with a navbar on top and a full screen open layers map underneath. There's also an off page navigation pane that slides in when the hamburger glyph is clicked.
I got the layout how I want it on my laptop screen, but when I checked on my phone, the navbar and fonts are far too small. Am I missing something in bootstrap to make this work? Is it the fault of the openlayers CSS?
Screenshot
Live: http://carpiediem.github.io/quartermaester/
Try this:
You applied body {font-size: 80%;}. Either remove or write class for the menu in media-query.
This site I've built at http://www.bridetobe.co.uk/ is doing something odd when I try and view it on a mobile device. I'm using some media queries to make it responsive and what happens when I view on a mobile #sitehead seems to be covering up most of #homepage_slider below(see image below).
From looking at the CSS on #homepage_slider I don't see any absolute positioning making it be in a particular place in this instance.
Does anyone know how I can make #homepage_slider position itself below #sitehead rather than behind it?
Thanks
#sitehead is position fixed so you either need padding at the top of the body (matching the height of your header) to push you slider down or not have your header fixed (make it relative). It works on the desktop as your sitehead is relative.
I'm working on this website and I can't figure out how to fix the problem.
if you use a fullscreen browser window you will see it perfectly (any major browser) but if the window is smaller, it shows the horizontal scrollbar plus cuts the website on the right of around 50px.
I can't change the design to make it more easy to do.
here's the link, you can see both html and css
http://www.ircm.comunicazioneimmagine.eu/
Using fixed size layout will cause problems with different screen resolutions. You should use fluid layouts to resolve the problem.
Fluid Layout Guide
Responsive Design
If you don't want to use fluid layouts.
Put all the content into a div with margin: 0 auto and add text-align: center to the body (IE explorer compatible). Choose a background that looks nice with the page and you're done.
But if the screen resolution is less than actual page size there won't be any solution but resizing the page manually.
the horizontal scroll bar is there cause your page exceeds the innerheight of the browser... my current res is 1920x1080 and I cannot see the bottom of the page. Perhaps try reducing the size of the big IRCM at the bottom.
I am having some issues getting my header images to flow correctly. This is a responsive WP theme.
Here is the design I am trying to achieve. (I am not worried about the social icons right now): http://screencast.com/t/0xJuqKuteU
First, I need the message bar with the redish background to flow under the logo and beyond the banner like this: http://screencast.com/t/CZ4DkbRA50R
Then for both the banner and the message bar, I need them to work better when the screen is shrunk down to phone size. This his how I need it to look on a phone: http://screencast.com/t/z5BQ7zB4
Notice the banner comes in right below the navigation and the message bar goes away.
Here is the site I am working on: http://dev.frugalreality.com
Thanks for your help!!
Having a screen CSS and Media/Phone CSS page should help in managing the two different screens.
To make the message bar "float" underneath the logo, you need to set the containing div css (#header-callout) to have position:relative; and set the z-index to something negative (z-index: -1 should do). This creates a layering in the divs and puts the message bar below all other divs (unless you set something else to a lower z-index).
For displaying things differently on the iPhone screen size I would suggest using a media-query. If you don't know how to use those, I suggest browsing through this article to get a better idea of what I mean: http://css-tricks.com/css-media-queries/
In order to NOT display the message bar, you will have to put display:none for the #header-callout in the css of the appropriate media-query.
I am trying to make a twitter-bootstrap layout, that has fixed side bar and content.
However, when width of browser window is reduced, content goes under sidebar.
The responsive layout is responsible for most disposition shifting resulting from window resizing. It is activated by default in the examples provided by the documentation.
You can disable the responsiveness of the layout by not including bootstrap-responsive.css as seen in the docs.
Note : the fluid grid has nothing to do with responsiveness. Both can be used independently.