[Support request] Navigation menu and footer

Home Forums Support [Support request] Navigation menu and footer

Home Forums Support Navigation menu and footer

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #885622
    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

    #885643
    David
    Staff
    Customer Support

    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;
        }
    }
    #891551
    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

    #891578
    David
    Staff
    Customer Support

    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

    #891590
    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

    #891603
    David
    Staff
    Customer Support

    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;
        }
    }
    #891613
    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

    #891616
    David
    Staff
    Customer Support

    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.

    #891621
    Joel

    Thanks David, you’re a legend! Amazing support πŸ™‚

    #891624
    David
    Staff
    Customer Support
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.