[Support request] Navigation menu and footer

[Joel]

Hi guys,

Two questions if I may?

1. I’m wondering if there’s any way to split the main navigation menu, so ‘home’, ‘about’, ‘blog’ and ‘contact’ are just to the right of the logo and then have a gap, with the sign up and log in button on the right of the nav bar?

2. I’ve centre-aligned the footer widgets, but ideally I’d like to left-justify the text in each footer widget, while keeping the widget titles centred. Is this possible?

Thanks in advance,

Joel

[David]

Hi there,

we provide this article for centering a logo in the nav:

https://docs.generatepress.com/article/centering-logo-navigation/

And this article for styling menu items as buttons:

https://docs.generatepress.com/article/adding-buttons-navigation/

For the widgets, try this CSS:

@media (min-width: 768px) {
    .inside-footer-widgets div:not(:last-child) .widget {
        text-align: left;    
    }
    .footer-widget-1, .footer-widget-2 {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

[Joel]

Thanks so much for the reply David.

However, I was wondering if I could get the menu looking a bit like the example in the website link? So, instead of the blank menu items I’ve added for reference, there would just be white space. Ideally, this would be a floating right menu but with a gap between “contact” and “sign up”.

Also, the widget css has worked well for the text (thanks!), but is it possible to also left align the social icons and image in footer widget 3, as these appear centred on mobile.

Sorry for all the questions!

Best,

Joel

[David]

So the social icons – you should be able to set them to Left align in the Lightweight Social Icons Widget ( i think lol ) – if not let me know.

Try this CSS:

@media (min-width: 768px) {
    .inside-header, .main-navigation ul {
        display: flex;
    }
    .main-navigation {
        flex: 1;
    }
    .main-navigation li.push-right {
        margin-left: auto;
    }
}

Then edit your menus and give the first item and the sign-up item a Custom Class of push-right

https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes

[Joel]

Thanks David,

That partially worked, although the signup link is now in the middle-ish of the menu. Also, the styling I had for the login button has been disappeared.

I’ve left aligned the social login, thank you. Is there any way to left align the image widget in footer area 3 as well?

Best,

Joel

[David]

You got the classes for each item mixed up 🙂 In total there will be three menu items with classes as follows:

Home – add push-right
Sign Up – add push-right
Login – add nav-button and only this class.

The image you have in the footer widget has white space all round it – so we need to use negative margins for alignment on mobile like so:

@media (max-width: 768px) {
    .footer-widget-3 .widget img {
        margin-left: -50px;
    }
    .footer-widget-3 .widget {
        overflow: hidden;
    }
}

[Joel]

Thanks David – perfect, although happy to crop the image if it would automatically display left 🙂

Also, the logo is extremely small on mobile view. Is there a way to have it display larger?

Best,

Joel

[David]

The mobile header logo is sized based on the mobile menu item height in the Customizer > Layout > Primary Navigation. But to make it bigger without increasing menu item height is to remove the default padding like so:

.site-logo.mobile-header-logo img {
    padding: 0 !important;
}

To make it bigger then that it would be best to edit the image and remove some of the top and bottom white space.

[Joel]

Thanks David, you’re a legend! Amazing support 🙂

[David]

Glad to be of help

[Author]

Posts