How to make responsive block

[newcoder1010]

hi,

I have several menu blocks and I placed all to the same region. My sitehttp://godrupal.info/dcyacht/. As I try to make the screen smaller (about 1000px), I have noticed that #block-system-main-menu is overlapping over #block-menu-menu-event. So, event menu can not be seen. All the menus at the top can be seen. Problem starts when I make screen smaller but greater than 993px.

I am using bootstrap theme. Is there any bootstrap css class for it or I need to apply my own css. I did not give you any html/css because I am confused which one to give you. If you could inspect in chrome, it will be so helpful.

Thanks.

[Ingolme]

The first problem is that in Bootstrap, an element with class "row" must be inside an element with class "container", if not then part of the content gets cut off. On mobile devices your content is 15 pixels outside of the viewport.

 

Another problem is that you're using position: fixed on some elements. Since you have moved it exactly 75px from the top, whenever the other fixed position element, .region-main-verytop1, is taller than 75 pixels it gets hidden behind.At most you should only have one single element with position: fixed and put all the other elements inside of that one. But a better solution would be to use Javascript to make a sticky menu so that none of them have fixed positioning and they can move flexibly to accommodate changes in size.

[newcoder1010]

I greatly appreciate your time. When I created my region in template file, I wrote this to create a new region:

		<div class="Very-Top1  ">
			 <?php print render($page['main-VeryTop1']); ?>
			</div>

Then I created few menu blocks and placed them in that region.

 

Now,

 

I re-wrote the above code as :

       <div class="container">
	<div class="Very-Top1 row ">
			 <?php print render($page['main-VeryTop1']); ?>
			</div>
</div>

Still did not work.

 

Then I changed the fixed position to 175px just to test. It is doing better. Thank you for that.

 

I will think about javascript advice that you gave me. For now, my question would be I like to keep the logo block under the menus. So, i gave logo region fixed position: 75px. Instead, can I give any percentage so logo will go down automatically when I make the screen smaller? I am just trying to make it responsive. I made progress but not completely.

 

Also, I did not understand what you mean by "At most you should only have one single element with position: fixed and put all the other elements inside of that one. "

Edited January 22, 2016 by newcoder1010

[Ingolme]

If you only had one element with a fixed position it wouldn't overlap the other fixed elements.

 

But the best approach would be to not make a fixed header, just leave it at the top of the page. This jQuery library will make it stick to the top of the screen for you while taking care of all the little quirks that normally happen when you try to do it with just CSS: http://stickyjs.com/

[dsonesuk]

There already is a bootstrap library to do this? why add/use another?