Change width of menu

[KvPr]

How change width of menu?

Theme: Unite 2 - Business

[MJCS]

Hi @KvPr, 

I can help you but it you'll need to let me know your website address and be more specific about what you mean by width of menu. Do you want it wider or narrower?

Thanks,

[KvPr]

Site: http://st15.weebly.com

I want to make menu wider

[#4]

You need to edit your css to do this.

Go to your account and edit your website

Click the theme at the top, then edit html/css

Scroll down (it shouldn't be that far) until you see a section called /* Header---/

In the section you need to look for .cento-header .nav-wrap (they need to be shown together like this)

Then you need to change the width by typing in width: 100%; if it isn't already there

Note that I'm using the cento theme, the name of the theme you are using will replace the word cento in .cento-header as this is how weebly have set it up.

[#5]

oh, I took your question as the menu bar at the top. Do you mean how do you change the width of the submenu when it scrolls down after you hover your mouse over it? That is a bit more complicated but can be done.

[JamesJr1]

I'm interested in changing the width / size of the sub menus as well. Please help.

[MJCS]

Hi @KvPr,

The space between the menu items is called padding. To adjust that you can add this at the bottom of your main CSS file:

.nav a {
    padding: 10px 50px;
}

The figure in red is the width, if you go much bigger than 50px you're going to cause the menu headings to move to a new line.

Regards,

[KvPr]

Sorry, I incorrectly written. I want to change the width of the submenu when it scrolls down after hover mouse over it.

[MJCS]

Hi @KvPr,

That's okay. You've done well to explain yourself in a different language.

I will get back to you with help later this morning. 

Regards,

[MJCS · Accepted solution]

Hi @KvPr,

the CSS that you need to add at the bottom of your main CSS file is below:

#wsite-menus .wsite-menu li a { font-size: 8px; width: 84px;} 
.wsite-menu { left: 20px; width: 84px;}

You will need to experiment with the 8px; and 84px; These are probably too small, but you know how you want it to look.

I used the left: 20px; to move the start of the drop down menu under the left side of СТАТЬИ. Once again, you can change that to suit your needs.

Regards, Mark

[#11]

@KvPr @JamesJr

I do mine a little differently than @MJCS. I think I added this line in, its been a while since I set it.

#wsite-menus .wsite-menu li {
  width: 350px !important;
}

 Hope this is what you needed.

[JElberfeld]

Below is how I changed the width of a vertical menu.

In my theme, I found this block in the css:

#navigation {
position: fixed;
display: block;
width: 230px;
height: 100%;
overflow-y: auto;
z-index: 10;
background: #777777;
}

I reduced the value of the width by 100 px to 230 pix. This cause a chain reaction because now the main page had more room.

#wrapper {
display: block;
width: 100%;
max-width: 1500px;
height: 100%;
box-sizing: border-box;
}

I increased the maximum width by 100px to 1500 so the main page would fill my screen.

#main {
position: relative;
left: 0;
display: block;
padding: 10px 20px 20px 250px;
vertical-align: top;
z-index: 9;
background: #e9ebee;
}
I decreased the last value in the padding by 100px to 250 px.

Because of the narrower menu, there was more wrapping and I had to decrease the vertical space between the menu item in the navaigation bar:

#nav ul li a,
#navmobile ul li a {
color: #fff;
display: block;
font-weight: 100 !important;
font-size: 1em;
padding:.5em 0;
cursor: pointer;
}

I reduced the padding from 1em to .5 em.

Your theme may be different, but this is the type of code to look for.

[#13]

@JElberfeld 

How do you find this code?

Jason

[JElberfeld]

When editing your site, click on the "THEME" option in the menu across the top of the page.
At the left side of the screen, scroll down if needed and then click on "EDIT HTML/CSS"
The files and the content of the files will depend on the theme you use. Global.less is a good place to start.

Drag the page view window from the top-center down to show more code.

CTRL-F will let you search the code for the element you want to modify.

If I change the code, I try to include the original values in a comment so I can undo my changes.
font-weight: 600; /*original 300 */

I hope this gets you started on customizing you site.