Navigation Bar Adjustments in Height & Width

On my website, PantrySpa.com, can you please tell me how to make the links in the green navigation bar (Recipes, Health, Home Remedies, etc.) center within the green bar?

Also, how can I make the primary navigation bar (the pink bar under the green bar) span the entire width of the screen and have a height equal to the height of the green bar?

If it is helpful, I have granted support access through the wpmu plugin...

Thanks for your help!

  • Vinod Dalvi

    Hi @d-invent,

    I hope you are well today and thank you for your question.

    On my website, PantrySpa.com, can you please tell me how to make the links in the green navigation bar (Recipes, Health, Home Remedies, etc.) center within the green bar?

    I think you are talking about making it vertically centered, if this is the case then you can achieve this by adding the following CSS code in the style.css file of your child theme or add it in your site using the following plugin.

    http://wordpress.org/plugins/simple-custom-css

    ul#menu-other-websites > .menu-item {
    margin-top: 7px;
    }

    Also, how can I make the primary navigation bar (the pink bar under the green bar) span the entire width of the screen and have a height equal to the height of the green bar?

    To achieve this properly we have to make some changes in the header.php file of your child theme but let's first try to achieve it entirely using the following CSS code.

    body.gppro-custom .nav-primary {
    width: 100%;
    left: 0;
    position: absolute;
    top: 44px;
    padding: 8px 0;
    }
    body.gppro-custom .site-container {
    margin-top: 50px !important;
    }

    Best Regards,
    Vinod Dalvi

  • d-invent

    Thanks, the problem with the following two lines is that the rest of the page does not get shifted down, so it makes everything look misaligned (and it overlaps on top of ads and the green nav bar for example):

    position: absolute;
    top: 55px;

    However, it is all working now, except the pink bar is not the full width of the screen. How would I do that without making everything overlap?

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.