• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Decrease Menu Bar Height

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Decrease Menu Bar Height

This topic is: resolved

Tagged: bar, decrease, height, menu

  • This topic has 3 replies, 2 voices, and was last updated 9 years, 10 months ago by Marcy.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • July 12, 2013 at 10:05 am #50384
    Mad Jack
    Participant

    Hello,

    My site is here http://intunegp.com

    I would like to make the Gray menu bar height smaller. I've searched the CSS but can't figure out how to do it.
    I'm guessing the search box height is also involved somehow.

    Any help would be greatly appreciated.

    Thanks,
    Jack.

    http://intunegp.com/newsite/
    July 12, 2013 at 1:10 pm #50413
    Marcy
    Participant

    To reduce the height of the search form, you would find this section:

    .s {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    background: #FFF url(images/search.png) center left no-repeat;
    border-radius: 5px;
    color: #AAA;
    font-style: italic;
    margin: 0;
    padding: 10px 10px 10px 35px;
    width: 180px;
    }

    Change the padding to reduce the top and bottom padding. To make them 0, you may want them to be 5px instead:
    padding: 0 10px 0 35px;

    For the menu height, find

    .menu-primary a, .menu-secondary a, #header .menu a {
    color: #FFF;
    display: block;
    padding: 15px 15px;
    position: relative;
    text-decoration: none;
    text-transform: uppercase;
    }

    Changing the padding on this section will also affect your header menu height, so you will want to make a separate section for .menu-primary a just below this.

    .menu-primary a {
    padding: 5px 15px;
    }

    You will want to adjust the first padding number so that it looks good with your font and your search form.


    Marcy | Amethyst Website Design | Twitter

    July 13, 2013 at 3:27 pm #50570
    Mad Jack
    Participant

    THANK YOU Marcy...

    That worked perfectly... YOU ROCK!!! 🙂

    July 13, 2013 at 5:01 pm #50572
    Marcy
    Participant

    Thank you! I'm glad it helped!


    Marcy | Amethyst Website Design | Twitter

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Decrease Menu Bar Height’ is closed to new replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble