WordPress.org

Forums

Market
Remove Top Menu from Home Page and Shorten Header Height (12 posts)

  1. azish1
    Member
    Posted 12 months ago #

    Is it possible to remove the top Menu?

    Also is there CSS code or another way to shorten the height of the top header? (the area with site description and social media icons)

    http://antxplore.com/

    I appreciate your help. Thank you.

    Azi

  2. Giulio 'the geek'
    Member
    Posted 12 months ago #

    Hi azish1,
    normally you should be able to eliminate the top menu by simply going to the menu settings in the dashboard. You should see that there's a menu assigned to the top bar. 'Unassign' that menu and you're done.

    If for any reason that is not possible, then add this css code to your style.css in your child theme:

    #top-bar {
    display: none;
    }

    As for the top header, try this code:

    #header-top .site-branding {
      margin-bottom: 0;
    }

    Add !important after the 0 if it doesn't work.
    That's the easiest thing to do. Adjust the value of the margin-bottom to be between 0 and 30px (which is its current value).
    You can also adjust other elements to further reduce the header height, come back here and let me know if you need further help.

    Giulio

  3. azish1
    Member
    Posted 12 months ago #

    Thank you Giulio. The code worked!

    I am also trying to shorten the space above the site title and tagline. I tried the following code but don't see the difference:

    #header-top .site-branding {
    margin-top: 0;
    }

    Also is it possible to shorten the height of the main Menu?

    Azi

  4. Giulio 'the geek'
    Member
    Posted 12 months ago #

    Hi Azi,

    The code that you've given doesn't work because the top margin is already at 0. You must reduce the height of the internal elements inside the header in order to reduce it further.
    Try this, the current value for this element is 20px.

    #header-top .site-title {
    margin-top: 0;
    }

    You can reduce the height of the main menu in two ways, one is by adjusting the padding. I give you the code with the original values, reduce them until you get what you want

    #site-navigation ul > li > a {
      padding-bottom: 20px;
      padding-top: 20px;
    }

    Another way is by reducing the font size of the social icons from the current 32px to a lower value.
    Try this for example:

    .social-icon {
      font-size: 24px;
    }

    Let me know if ti works :-)

    Giulio

  5. azish1
    Member
    Posted 12 months ago #

    The code for #header top works!

    I was able to change the font size of social icons by this:

    li.social-icon I {
    font-size: 16px;
    }

    And also added the following code to shorten the menu but the menu height is not changing. I appreciate your help!

    #site-navigation ul > li > a {
    padding-bottom: 5px;
    padding-top: 5px;
    }

  6. Giulio 'the geek'
    Member
    Posted 12 months ago #

    Add the !important directive to override the command, like this:

    #site-navigation ul > li > a {
    padding-bottom: 5px !important;
    padding-top: 5px !important;
    }

    That command is very specific, it should work but let me know if it doesn't and I'll give you an alternative.

    I'm glad to help when I can :-)

    Giulio

  7. azish1
    Member
    Posted 12 months ago #

    I added the following code and also removed the social icon plugin but still don't see a difference.

    #site-navigation ul > li > a {
    padding-bottom: 5px !important;
    padding-top: 5px !important;
    }

    Thanks!
    Azi

  8. Giulio 'the geek'
    Member
    Posted 12 months ago #

    I didn't notice before, there's also a hidden element in that menu. Keep the code above but add also this:

    #site-navigation .screen-reader-text a {
    padding-bottom: 10px !important;
    padding-top: 10px !important;
    }

    If that doesn't work yet let me know, and I'll install the theme on my local pc to check personally

  9. azish1
    Member
    Posted 12 months ago #

    I added the code but still don't see a difference.

    #site-navigation ul > li > a {
    padding-bottom: 5px !important;
    padding-top: 5px !important;
    }

    #site-navigation .screen-reader-text a {
    padding-bottom: 10px !important;
    padding-top: 10px !important;
    }

    Thanks!

  10. Giulio 'the geek'
    Member
    Posted 12 months ago #

    Hi Azi,

    On my test website I can guarantee that this works

    #site-navigation ul > li > a {
      padding-bottom: 10px !important;
      padding-top: 10px !important;
    }
  11. Jammyamerica
    Member
    Posted 12 months ago #

    Working good...

  12. azish1
    Member
    Posted 12 months ago #

    Strange, maybe some of my other CSS code or my plugins is causing this not to work on my site...

Reply

You must log in to post.

About this Theme

About this Topic