[Resolved] How to make square mobile logo full width?

Home Forums Support How to make square mobile logo full width?

Viewing 15 posts - 1 through 15 (of 21 total)
  • Author
    Posts
  • #1148840
    Jacks McNamara

    Hello, thank you for your wonderful theme, I have used it on many websites.

    I have been searching and searching the support forums and trying many things, but I can’t find the answer to my question, so I’m posting it here.

    I am currently building a website where the desktop view uses this tutorial to create a split nav menu with a centered logo: https://docs.generatepress.com/article/centering-logo-navigation/.
    It worked great, thank you!

    The staging website I am building is at https://wings.jacksmcnamara.net.

    I am trying to figure out if I can create a mobile header like this example from another website: https://wings.jacksmcnamara.net/wp-content/uploads/2020/01/unnamed-4.jpg. I don’t need to have all the social media icons, just the square logo as the header, and either the menu like they have it – floating right on top of the image – or it could go under the logo too.

    The image I want to use for my mobile logo is this: https://wings.jacksmcnamara.net/wp-admin/upload.php?item=290

    Thank you for any help!!!

    oh – also – since I used your split menu/centered logo tutorial, my mobile menu has my logo in the middle of it. Is there a way to get rid of that?

    #1149103
    David
    Staff
    Customer Support

    Hi there,

    could you take down the coming soon so i can take a look?
    Also this image:
    https://wings.jacksmcnamara.net/wp-admin/upload.php?item=290

    can you share from the media library URL πŸ™‚

    #1149205
    Jacks McNamara

    Shoot sorry about that, I meant to disable the coming soon. It’s disabled now. And sorry about the image! It’s here: https://wings.jacksmcnamara.net/wp-content/uploads/2020/01/purple-ring-logo-final.jpg

    Logo with purple background

    #1149494
    David
    Staff
    Customer Support

    You can remove the Customizer > Layout > Header –> Mobile Header Logo
    Then add this CSS:

    @media (max-width: 768px) {
        #mobile-header {
            background-color: transparent;
            position: relative;
            z-index: 100;
            border: 0;
        }
    
        #mobile-header .menu-toggle {
            color: #fff;
        }
    
        #page {
            margin-top: -80px;
        }
    }

    I would suggest enabling the Off Canvas Panel for the mobile menu:

    https://docs.generatepress.com/article/off-canvas-panel-overview/

    #1149612
    Jacks McNamara

    So I tried it and it didn’t work at all. I inserted the css and set up the off canvas panel, but as you’ll see, in mobile view there is no menu button, it still shows my regular desktop navigation. I’m guessing this is because I have the split header set up? Note: my usual site logo has a transparent background, so when I added your css I set the background color to be purple. That doesn’t show up either.

    Here’s all my css:

    .main-navigation {
    border-bottom: 2px solid #fd992f;
    }

    .site-info a {
    color: #f99b16;
    }

    ***here’s the split header/centered logo css****

    .inside-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    }

    .header-widget {
    order: 10;
    overflow: visible;
    }

    .nav-float-right .header-widget {
    top: auto;
    }

    .nav-float-right .header-widget .widget {
    padding-bottom: 0;
    }

    .site-branding,
    .site-logo {
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 200;
    }
    #mobile-header .mobile-bar-items {
    -webkit-box-ordinal-group: 5;
    -ms-flex-order: 4;
    order: 4;
    margin-left: auto;
    }
    #site-navigation {
    float: none;
    width: 100%;
    }

    .main-navigation:not(.slideout-navigation):not(.mobile-header-navigation) .main-nav > ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    }

    .main-navigation .menu-item-separator {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    }

    .main-navigation .menu-item-separator a {
    font-size: 0;
    background: transparent !important;
    }

    .slideout-navigation .menu-item-separator,
    .main-navigation.toggled .menu-item-separator{
    display: none !important;
    }


    @media
    (max-width: 768px) {
    .inside-header>:not(:last-child):not(.main-navigation) {
    margin-bottom: 0;
    }
    }
    *** here’s your css for the mobile header ***


    @media
    (max-width: 768px) {
    #mobile-header {
    background-color: #3e243c;
    position: relative;
    z-index: 100;
    border: 0;
    }

    #mobile-header .menu-toggle {
    color: #fff;
    }

    #page {
    margin-top: -80px;
    }
    }

    thanks for any insights!

    #1149700
    David
    Staff
    Customer Support

    You can remove the Customizer > Layout > Header –> Mobile Header Logo

    Just remove the Logo from here but keep the Mobile Header Enabled πŸ™‚

    #1149728
    Jacks McNamara

    I took out the mobile logo, and now the background and the menu button show up, but there is no image displayed.

    #1150103
    David
    Staff
    Customer Support

    Aah sorry – when i check the site you had added the Logo in the page content with it set to display only on mobile. Hmmm….

    So lets get the image where we need it.

    Create a new Hook Element:

    https://docs.generatepress.com/article/hooks-element-overview/

    Add this to its content – make sure the image URL is correct:

    <div class="mobile-large-logo hide-on-desktop">
        <img src="https://wings.jacksmcnamara.net/wp-content/uploads/2020/01/purple-ring-logo-final.jpg" alt="Logo with purple background">
    </div>

    Select the after_header hook from the list.
    Set Display Rules > Entire Site

    And in the CSS provided above – remove this:

    #page {
        margin-top: -80px;
    }
    #1151709
    Jacks McNamara

    That worked! Except – it appears that if I am in tablet view (medium screen width, between desktop and mobile) I have both headers operating. The split header with centered logo, and the mobile menu with the full-width logo.

    #1151876
    David
    Staff
    Customer Support

    Edit the first line of the HTML to include the hide-on-tablet class ie.

    <div class="mobile-large-logo hide-on-desktop hide-on-tablet">

    #1153377
    Jacks McNamara

    Thank you! So that worked, in terms of hiding the mobile logo while in tablet size view. However, one last question: in tablet view, the central menu items are kind of hidden behind the logo. Here’s a screenshot: https://wings.jacksmcnamara.net/wp-content/uploads/2020/02/Screen-Shot-2020-02-03-at-2.47.35-PM.png
    Any thoughts on what I could do about this? I changed the mobile menu breakpoint in the customizer such that I thought I would be seeing the mobile menu button in tablet view, but that is not happening.

    #1153942
    David
    Staff
    Customer Support

    Try this to resize the logo on tablet devices:

    @media (max-width: 1024px) {
        .site-logo {
            max-width: 200px !important;
        }
    }
    #1155766
    Jacks McNamara

    It didn’t work, in tablet view the menu still slides behind the logo

    #1157269
    Jacks McNamara

    Just bumping this thread in case you didn’t see my last message – the fix you suggested didn’t work, in table view the menu still slides behind the logo. Any thoughts? Is there an easy way to get it to switch from the desktop menu to the mobile menu toggle?

    #1157581
    David
    Staff
    Customer Support

    Sorry not sure how this slipped past our system. That CSS should work – you may just need to reduced the 200px

    In Customizer > Layout > Primary Navigation you can set the Mobile Menu Breakpoint – increase this to have the Mobile menu appear on larger screens.

Viewing 15 posts - 1 through 15 (of 21 total)
  • You must be logged in to reply to this topic.