One can easily modify the CSS associated with the menu, reduce margins, padding, font sizes etc to fit more menu items horizontally…and also use a custom and shorter title for each menu item…and even group some into one topic and use sub-menus…one could also alter the page width in CSS…etc…
That all said modify
.menu LI {
padding-left:18px;
padding-right:18px;
to smaller amount of px each (make same to keep text centered)
Also, I would add a black background to menu area:
.header-menu-wrapper {
background: #000000;
}
and remove both
float:right;
height:61px;
from
.menu
(note typically Home is first on the left – re-arrange in your menu)
You could also change
.menu A {
padding-right: 15px;
padding-left: 15px;
to smaller px amount to gain more horizontal space
Thanks so much for taking the time to post a reply, appreciated. This may sound stupid but where can I go to modify that information? I am totally new to blogging and especially with CSS, I only know basic Html which is what I have been trying to get away with so far lol, so if you could point me in the right direction that would be great, thanks.
The file to edit is style.css of your theme, but it is best practice to create a child theme and add your styles to the child theme style.css (per instructions in link)…this all requires a knowledge of CSS, WordPress, and testing.
It looks now like you have made some edits, just be sure to backup each step so you can get back to where you where in the event of an error.
thanks so much, and do you happen to know the code I would use to make this a sliding style menu? Thanks in advance.
