Sorry if this question seems too basic - but:

How to place Navbar in screen width, not page width in Drupal 7?!

Usually my Navbar script is put in a block in width: 100%; and the Page max-Width for all blocks is defined as 1200px;
but - if it is so, My navbar is not full screen width - it is leaving white spaces on both sides;

What is the correct way to make it Full Screen Width, so it occupies the width from left corner to to the right corner and without white spaces?!


megan_m’s picture

You're going to have to adjust your theme CSS so that the region the menu is placed in goes full width, while retaining the max-width on the menu block itself. How to do this depends on the structure of the them you're using. If it has a full page wrapper with that max-width on it, you're going to have to do some restructuring to get the max-width to apply only on certain regions. I usually make an "innerwrapper" or "fixwidth" class and apply that only where I want to apply the max width.

Woolwich Web Works: Custom web development

ZambalaRed’s picture

good try, but nothing new....

as I said I have this wrapper .page {max-width: 1200px; width: 100%;} - it is there and is not planned to remove; how to put my Menu Above it all in a Block?!

Of course, easy solutions are 2 known : to tell my Menu {width: 112%;} - but I am not sure how it would look in other screens, bigger or smaller;

and 2nd- should I try to put it without a block hardcoded in a Template and there is no better solution?!

megan_m’s picture

Sorry I wasn't clear. You'll have to change the html structure in the page template so that menu isn't constrained by the max width. Exactly how to do that depends on how your existing theme is structured. It sounds like the full page is wrapped in a .page class that is fixed width. You will have to change the HTML so that there is a menu region that is outside of that div.

You might have to change it form something like this:

<div class="page">
  <header class="header">Header region</header>
  <main class="content">Content region</main>
  <footer class="footer">Footer region</footer>

To something like this:

  <header class="header fixwidth">Header region</header>
  <div class="menu">Menu region</div>
  <main class="content fixwidth">Content region</main>
  <footer class="footer fixwidth" >Footer region</footer>

So now you have a menu region with no fixwidth. Of course, if you need to create a new region you'll have to define that in your theme .info file. And make sure you override the page template file properly by copying it to your custom theme (if there isn't one there already).

Woolwich Web Works: Custom web development