Change font+effects in menu/header and make header/menu smaller

edited March 2015 in Theme support
Heya! I've a few questions, I hope you'll help me out even though they aren't all strictly related to your theme.

1. How do I make the width of the Main Menu/Header smaller? Mine is displayed on www.shadeproof.com and I want it to be more similar to www.apple.com
2. On my frontpage I have a slider. I would like the slider to be closer to the Main Menu/Header. Mine is displayed on www.shadeproof.com and I want the distance to be more like the one on www.apple.com - ONLY ON THE FRONTPAGE. The distance should be the same on the rest.
3. How do I centre all the text in the menu? Basically I want it all to be centered (search icon included). Once again like www.apple.com.
4. How do I hide the menu on specific pages? Basically I want the header removed on (if you can give me the CSS and tell me what to replace I can do it mysself of course):

www.shadeproof.com/successvl
www.shadeproof.com/successfr
www.shadeproof.com/successfa
www.shadeproof.com/scamfeed

Thank you so much!

Comments

  • Hey,

    1. Do you mean to make fonts in menu smaller? Because if this is what you mean, then you can do this in Theme options > Fonts > Font family section.

    2. If you want slider to be closer to menu, please decrease padding for section because as we see, you setup 60px top padding.

    3. This can be done within css but unfortunately search icon won't be centered as for this must be rebuilt whole header code.
    #Top_bar .menu > li {
        display: inline-block !important;
        float: none !important;
    }

    #Top_bar .menu_wrapper {
        float: left !important;
        text-align: center !important;
        width: 100%;
    }
    4. This can be done within css as below:
    .page-id-xxx #Top_bar .menu_wrapper { display: none; }
    where xxx is page ID.
  • Hello again! Thank you for getting back to me. 3+4 worked, thanks so much.

    1. No, I mean making the actual menu smaller. Like the width of the menu. If you try to open apple.com you can see that the menu is very thin. So I want the font/text inside the menu to remain the current size, but I want the width of it/how far the menu goes down to be smaller. So basically, I just want to make the menu smaller in width (not length). :)

    2. Where can you decrease padding for section? :) 

    THANK YOU.
  • 5. Would it by the way be able to add text in the menu, without having to make it bigger/add an action bar above? If you see www.shadeproof.com you can see that there is a lot of left over space on the sides. Perhaps I can put a logo in there or just some text? 
  • 1. Yes, we saw it but unfortunately it is not possible to make the same menu.

    2. You can do it in SECTION item. Take a look at description http://themes.muffingroup.com/betheme/documentation/#section

    5. Sorry but you can't do this because this is menu section and reserved for menu items only.

    Thanks!
  • So it is in no way possible to make the menu thinner? :)
  • Is it possible to get CSS to push it closer to the top? 
  • You can only make font smaller and decrease line height within below css:
    #Top_bar .menu > li > a span:not(.description) { line-height: 40px; }
    #Top_bar .menu > li > a strong { font-weight: normal; }
Sign In or Register to comment.