Title: Menu width – full screen
Last modified: August 21, 2016

---

# Menu width – full screen

 *  Resolved [guy1407](https://wordpress.org/support/users/guy1407/)
 * (@guy1407)
 * [12 years ago](https://wordpress.org/support/topic/menu-width-full-screen/)
 * Hi all
    Is it possible to change the menu bar width to be full screen size ? 
   Also how do I increase the menu height just a bit…
 * Thanks
    Guy

Viewing 4 replies - 1 through 4 (of 4 total)

 *  [Angel-Grafik](https://wordpress.org/support/users/angel-grafik/)
 * (@angel-grafik)
 * [12 years ago](https://wordpress.org/support/topic/menu-width-full-screen/#post-4887590)
 * Full width main menu bar:
    as I know, you can’t just like that: it’s included
   in the header div wich has the width of the main layout defined in Tempera Settings
   _Layout Settings > Content / Sidebar Width: Total width =_; you can adjust this
   value to your needs but with a max value of 1920px (HD screen)… Note that if 
   you push this width to its max value and activate the responsiveness, your site
   and its menu bar will be full screen for all screen with a width less than or
   equal to 1920px.
 * Otherwise, if you want your menu bar to be full screen but without the rest of
   the layout, you must make some change in files:
    create a child theme and modify
   the header.php: extract the `<nav id="access">...</nav>` from the “masterhead”
   div and put it just before the end of the “header-full” div. Your menu bar will
   be full sceen but the menu itself will be stuck to the left!… To correct that
   you must add a fixed width (the one of your main layout) to the “div.menu” in
   your css: `div.menu { width: ...px; }` This will work but is risky for the responsive
   menu: it will have a large fixed width too. Solution?… Add this to your css in
   addition to the last:
 *     ```
       @media ( max-width: 800px ) {
       div.menu { width: 100% }
       }
       ```
   
 * With this, the menu will not be wider than the screen width for all screens smaller
   than 800px (tablets and mobiles)
 * To modify the menu height: change the css padding of
 *     ```
       #access a span {
           display: block;
           padding: 10px 13px;
       }
       ```
   
 * If you don’t create a child theme and use the original Tempera theme, you can
   put this css mod in: _Tempera Settings > Miscellaneous Settings > Custom CSS_
 *  Thread Starter [guy1407](https://wordpress.org/support/users/guy1407/)
 * (@guy1407)
 * [12 years ago](https://wordpress.org/support/topic/menu-width-full-screen/#post-4887662)
 * Hi there
    Sorry for my late reply , it took me time to understand and execute
   what you wrote. Thanks for your reply…
    1.  I tried to increase the total width of the site – and you were right – it did
       have problems on different resolutions
    2.  I replaced the header php as you suggested – works like magic!
        But what you
       wrote about the menu going to the left – did not happen (and its OK!!! 🙂 )
    3.  I tried to increase the height of the menu bar with the change to the style.
       css or in custom css section as suggested, it did not work.
 * So currently I need just to increase the menu bar height a bit.
    Can you please
   test it by yourself and post again ? Guy
 *  [Angel-Grafik](https://wordpress.org/support/users/angel-grafik/)
 * (@angel-grafik)
 * [12 years ago](https://wordpress.org/support/topic/menu-width-full-screen/#post-4887678)
 * Hi Guy,
 * there is an option in Tempera settings to position the menu items (left:middle:
   right) [_Tempera Settings > Graphics Settings > Sets the desired menu items alignment._];
   mine was configured to be on the left, so maybe yours was in the middle and it’s
   possibly the reason why you didn’t encounter any problem when altering the header.
   php…
 * Concerning the height of the menu, I tried before posting (I always do… 😉 and
   I retried and it worked… If your didn’t make any change in the html structure
   of the menu and/or its classes, it must work.
    Try to put the css in the custon
   section of the settings but of the original Tempera theme to see if it work correctly
   on a non modified theme.
 * …hum!… Did you just wrote the css code I gave you? (it was the original one) 
   Maybe you might alter it as your needs:
    padding: **px 13px; and change the **
   to a higher value than 10px.
 * Hope it can help you 😉
 *  Thread Starter [guy1407](https://wordpress.org/support/users/guy1407/)
 * (@guy1407)
 * [12 years ago](https://wordpress.org/support/topic/menu-width-full-screen/#post-4887697)
 * Hi again,
    Thank you for getting back!
 * Indeed the height changed by adding the “#access..” setting
 * I have no idea why it did not change it before…
 * Have a great day!
    Guy

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Menu width – full screen’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/tempera/1.8.4/screenshot.png)
 * Tempera
 * [Support Threads](https://wordpress.org/support/theme/tempera/)
 * [Active Topics](https://wordpress.org/support/theme/tempera/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/tempera/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/tempera/reviews/)

## Tags

 * [menu width](https://wordpress.org/support/topic-tag/menu-width/)

 * 4 replies
 * 2 participants
 * Last reply from: [guy1407](https://wordpress.org/support/users/guy1407/)
 * Last activity: [12 years ago](https://wordpress.org/support/topic/menu-width-full-screen/#post-4887697)
 * Status: resolved