[Resolved] Resizing the Navigation

[Andrew Thompson]

Hello GP Community!

I’m sorry if this question is completely noob but I am fairly new at development.

I’m trying to re-size my main navigation bar to make the width slightly smaller than the standard area. I’ve already downloaded the blank child theme, but I’ll admit, I’ve never added custom css to style.css before so if there’s anything else I might need to do please let me know.

[Roberto Enrique]

I think you should try the spacing add-on.

If you share a link to your website or a screenshot/mockup explaining exactly what you want to accomplish hopefully we can help you with some custom css.

[Andrew Thompson]

Hello Roberto!

Thank you for the reply!

Here is a moqup of what we would like the end result to look like: https://moqups.com/djamilak/k4qx13IU

Here is the current site: http://www.lyolife.com

[Roberto Enrique]

wow, that stuff to the right of your menu feels like heavy mods 🙂

…but, whatever…

Using this:

.inside-navigation.grid-container.grid-parent {
    background: #ffffff none repeat scroll 0 0;
    margin-left: 40px;
    margin-right: 40px;
}

and setting #site-navigation to the desired background color should do the trick

nav#site-navigation {
    background: #00376d none repeat scroll 0 0;
}

You’ll have to play a bit with media-queries so your menu behave nice on mobile view but that’s not too difficult.

http://i.imgur.com/25q0erC.png

[Tom]

That stuff to the right of the nav will definitely take some customization – you may want to look at the generate_inside_navigation hook for adding your HTML in there.

I would personally set the navigation background to your dark blue, and then set the menu item background to white – then the white will expand to the right as far as your menu items take it, and you can float your HTML to the right using the hook above.

[Andrew Thompson]

Thanks guys!
Just one thing though.

In my GP Hooks I don’t have access to generate_inside_navigation…
Do you know possibly why I can’t see it?

[Tom]

It’s not in GP Hooks (yet) – I think I should probably add it as more and more people are wanting to use it.

For now, you can use a simple function:

add_action( 'generate_inside_navigation','generate_insert_into_navigation' );
function generate insert_into_navigation()
{ ?>
      Put your HTML or whatever in here
<?php }

Adding PHP: http://generatepress.com/knowledgebase/adding-php-functions/

[Author]

Posts