Jump to content

menu bar div hieght changes as viewport decreases


old_picker

Recommended Posts

here's the link

As you resize down the browser window you'll observe the menu bar collapse into a mobile drop down style menu. As you further decrease it you will observe it pop up to full screen height above its relative horizontal position behind the layout div above it. I estimate the change is happening at around 480 ish pixels wide

 

it is in the css of course but just which property is the culprit?

why is it changing it's size?

how can i prevent this happening?

 

thanks in advance

 

Link to comment
Share on other sites

Because the text is floated to the left, there's space available for the box below it to occupy.

 

You can fix that by adding clear: both; to #navigator.

Link to comment
Share on other sites

thanks

 

the clear: both; property is stated except under /* Mobile Layout: 480px and below. */ section

tried adding the property line line one there and nothing changed the green block still expands to top of screen

tried adding the statement last and the menu appears as a vertical block instead of inline at wide resolution and still expands to top of screen at narrow view

 

any further tips most appreciated

Link to comment
Share on other sites

this is a dreamweaver fluid grid layout -

 

there are 3 statements of the navigator div ID one each for mobile, tablet and large screens.

the main css config is added into the mobile css section and is inherited by tablet and big screen sections - the two latter sections have only a few lines of code and each contain the clear: both; property.

 

I tried adding the property to the mobile section but results were not good

Link to comment
Share on other sites

I can't see anything like you mentioned happening? Since you stated a 'Dreamweaver fluid grid layout' you are not viewing through just Dreamweaver own preview view are you? it is extremely unreliable compared to viewing through actual browser.

 

If not! what browser and version are you using?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...