menu items font and size and spacing

  • Author
    Posts
  • #2569803

    serealities
    Member

    I would like to know how to reduce the size of the font in my menu items so that they are still legible on a phone but I need to add another item in the menu and I don’t want it to wrap when viewing from the phone. So maybe I can make them a little smaller and a little closer together. If there is css for this, I can also change the font for menu items if there is a way to do this also.
    Thanks!

    The blog I need help with is serealities.com.

    #2569905

    dianakcury
    Member

    Hello,

    Try adding the following CSS:

    #access li a {
    	font-family: arial; /* a font family */
    	font-size:12px;
    	padding:0 0.5em
    }
    
    @media screen and (max-width: 600px) {
    	#access li a {
    		font-size:16px;
    	}
    }
    #2569914

    serealities
    Member

    Hey, thanks!! that works alright but when I added the “community” menu item, it wraps on the phone. Is there any way to put menu items closer together so that the menu items do not apple to wrap on the phone?
    Thanks!

    #2569923

    dianakcury
    Member

    Hi again, replace the previous CSS with this one:

    #access {text-align:center!important} /* center items */
    
    #access li a {
    	font-family: arial; /* a font family */
    	font-size:12px;
    	padding:0 1em
    }
    
    @media screen and (max-width: 600px) {
    	#access li a {
    		font-size:11px;
    		padding:0 0.2em
    	}
    }

    Usually, small devices should display menu items stacked, you can try this by adding:

    #access {text-align:center}
    
    #access li a {
    	font-family: arial; /* a font family */
    	font-size:12px;
    	padding:0 0.5em
    }
    
    @media screen and (max-width: 600px) {
    	#access li { display:block }
    	#access li a{
    		font-size:16px!important;
    		padding:0.5em;
    	}
    }
    #2569937

    serealities
    Member

    Perfect! Many thanks!

    #2569944

    dianakcury
    Member

    You are welcome :)

    #2569948

    babymodels
    Member

    Hello there! I need help with getting our “menu” tabs on our blog to be centered. I’ve tried moving the tabs around but it never looks perfectly centered. Always looks kind of “scattered”. How do I do this via CSS? please. Help!!! =)
    the blog in question is http://www.babyandchildmodeling.com
    Thank you!!!

    #2569949

    dianakcury
    Member

    Hi @babymodels

    Please create a forum post only for your question then I will answer there :)

The topic ‘menu items font and size and spacing’ is closed to new replies.