Default theme menu modification question

[zedd2006]

So after looking and looking for a good free theme and not finding one that seemed to work flawlessly, or was clunky or misplaced i decided to just stick with the default theme and modify it to my liking.

 

I really liked the look of the blackhawk theme menu because it was smaller and elegant. So my question is for the default theme how do i at least make the words smaller? Is there a way to do this without modifying the css? I dont really have time to rummage through css code. Or if you can at least tell me where to find it in the code.

[SirPresta]

At line 60 in file  /themes/default-bootstrap/css/modules/blocktopmenu/css/superfish-modified.css

.sf-menu > li > a {
    font: 600 18px/22px "Open Sans",sans-serif;
    text-transform: uppercase;
    color: #484848;
    display: block;
    padding: 17px 20px;
}

There is no option to modify this without editing css in blocktopmenu module.

 

Best regards SirPresta

[BriceVanZeg]

Yes, it s necessary change in global.css.... for change the font size ! it s this you want (sorry i m french)

 

If yes, give us your url , like this we can tell you which lines need to change.

 

Brice

[zedd2006]

Hi, my web address is

 

www.williamsongraphics.com

[BriceVanZeg]

Sirpresta give you an answer... it s this, for the menu , you want a smaller font ?

 

Or where exactly ?

 

Brice

[zedd2006]

So if i wanted to make it 4px smaller i would change it from:

 

font: 600 18px/22px "Open Sans",sans-serif;

 

to this

 

font: 600 14px/18px "Open Sans",sans-serif;

 

Correct? I'm not a css [spam-filter] or anything and not exactly sure what that 600 is about.

[BriceVanZeg]

yes, try it, you will see, and adjust if needed .!

[zedd2006]

Alright, i think i got the menu text right and i changed the color a bit, but how do i change the over all height of the menu? How do i change the font to bold?

[zedd2006]

I tried adding this:

  .sf-menu > li > a {
    font: 600 12px/16px "Open Sans", sans-serif;
    font-weight: bold; 

and it didn't seem to work.

[BriceVanZeg]

The best it s to use inspector tool under firefox...! you can see and test the change online on every site, before changing code in your file.!

 

Look this pages, and try it.. this is what you need for change the design of your website : https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS

[zedd2006]

I dont know what to modify to make the text bold or to reduce the height of the menu.

[BriceVanZeg]

Try the link, i give you, with this, you click right on the element you want to change, et on the console down of page, you see the line for change.!

It s on the same line you change already.! make some try, for see the difference.!

 

brice

[zedd2006]

Alright i figured out the 600 to 900 font weight. But i still cant figure out how to change the height of the menu to make it "skinnier".

[SirPresta]

I have very useful link for you. I see that css will be your passion. This is very useful site, where you can learn everything about CSS.

http://www.w3schools.com/css/default.asp

 

When you spend one day for this tutorial, I think that it helps you with every problems.

 

Best regards SirPresta

[Michael_D]

Alright i figured out the 600 to 900 font weight. But i still cant figure out how to change the height of the menu to make it "skinnier".

By skinnier do you mean width or height? One thing to keep in mind is how your site looks on mobile phones and tablets, if you make things to small it makes it hard to use on small screens. So you need to be sure it will be good for both.

[zedd2006]

I'm not wanting to modify the responsive elements. I'm just simply trying to make the height of the menu less. For example if the menu is set to 100% width and the height is set to say 40px, i would like keep the width the same at 100% but the height to 30px or whatever value it is.

[Michael_D]

The same place SirPresta said above at line 60 in file  /themes/default-bootstrap/css/modules/blocktopmenu/css/superfish-modified.css, change the first number on padding (currently 17px) to something less.

 

 

.sf-menu > li > a {

    border-bottom: 3px solid #555555;

    color: #ffffff;

    display: block;

    font: 900 13px/17px "Open Sans",sans-serif;

    padding: 17px 20px; <------------------------ Change the padding here, first number is padding on top and bottom, second number is right and left padding.

    text-transform: uppercase;

}

[zedd2006]

 

The same place SirPresta said above at line 60 in file  /themes/default-bootstrap/css/modules/blocktopmenu/css/superfish-modified.css, change the first number on padding (currently 17px) to something less.

 

 

.sf-menu > li > a {

    border-bottom: 3px solid #555555;

    color: #ffffff;

    display: block;

    font: 900 13px/17px "Open Sans",sans-serif;

    padding: 17px 20px; <------------------------ Change the padding here, first number is padding on top and bottom, second number is right and left padding.

    text-transform: uppercase;

}

 

 

Thank you so much, i appreciate your help and not telling me to go learn css from w3schools.com

[BriceVanZeg]

Thank you so much, i appreciate your help and not telling me to go learn css from w3schools.com

Yes, it s nice to get help, but, i give you a link, for a precious tool, necessary need in your browser... ! it s like the swiss knife for everybody have a website and want to change design on it.!

Every developper use this.!! Need to try, because it s easy, no need to learn anything.! just read one time the page, and install the tool, that"s it.!

 

Best regards

 

Brice

Edited November 11, 2015 by BriceVanZeg (see edit history)