Menu width – full screen

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

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

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 ??

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