[Support request] Hambuger menu top bar

[David]

Can you share the latest link to the site ?
I went back to the original example and new site and they look identical… but different to what we had got to in the last few replies.

[Andrew]

Hello David, thanks for the reply.
When I add the code below(to the media query you sent me), its makes the logo full width, what I’m trying to do is starting at Tablet, have the mobile icon and search go above the header, like it does on mobile.. However I would prefer the logo not take up the full screen and be more in the neighborhood of 350px, and centered.

Ive attached some new files to the link below for reference.

If you visit the live website and look on in the inspector @ 920px you will see the look im after for tablet.

https://mismile.com/. <== Live site
https://mismilestaging.wpengine.com/ <== New site with GP

https://drive.google.com/drive/folders/1vdwLSHBRbsxsILUjtUPq3ltZLWrRlN7p?usp=sharing
/* Force logo full width */
.site-logo, .site-logo img {
width: 100%;
}

[David]

So this CSS for re-arranging the Tablet layout:

@media(max-width: 1024px) and  (min-width: 769px) {
    .inside-header {
        flex-wrap: wrap;
    }
    .site-logo {
        order: 5;
        flex: 1 0 100%;
        text-align: center;
    }
}

And this CSS i provided needs to go inside a max-width: 1024px media query:

https://generatepress.com/forums/topic/hambuger-menu-top-bar/page/2/#post-1865931

[Andrew]

Your the man! Is their a way to have the previous code still function and not have the logo 100%? It looks like its stretched alot at the smaller breakpoint, I have updated the folder. After that I’m all set thank you so much! I will make sure to leave some positive feedback

https://drive.google.com/drive/folders/1vdwLSHBRbsxsILUjtUPq3ltZLWrRlN7p?usp=sharing

[David]

So on the small screen we had this CSS:

@media(max-width: 768px) {
     /* Move hamburger above logo */
    .has-inline-mobile-toggle .mobile-menu-control-wrapper {
        order: -1;
    }
    /* Force logo full width */
    .site-logo, .site-logo img {
        width: 100%;
    }
    /* float icons over menu bar */
    .mobile-contact-icons {
        position: absolute;
        top: 20px;
        z-index: 1;
    }
}

And in there, this rule is what sets the site-logo container to full width AND forces the image to 100% width:

/* Force logo full width */
.site-logo, .site-logo img {
width: 100%;
}

Changing that to:

/* Force logo full width */
    .site-logo {
        width: 100%;
    }

Will stop the image from being scaled 100% wide.

[Andrew]

Is it possible to move the title to match the second link on this blog page? If not no biggie…

https://mismilestaging.wpengine.com/our-blog/
https://mismile.com/our-blog/

[David]

Do you mean the post articles ?
If so then Customizer > Layout > Blog –> Featured Images >>> Archives and set the Location to Before Title.

[Andrew]

Thank you for all your help I was finally able to get this completed, I noticed a weird issue when using this theme tho, all my permalink settings are the same as the original site, do you know why its adding #more-(post Number), it didn’t do this when I was our previous one, same with the buttons on the blog page when I hover over them I see the url with that after it, I took a screen record, of this issue and uploaded here. My apologies if im missing something, if you hover over the button you will see what im talking about same with when you click it and look at the url

https://drive.google.com/drive/folders/1vdwLSHBRbsxsILUjtUPq3ltZLWrRlN7p?usp=sharing

https://mismile.com/our-blog/

[David]

GP adds the more jump links to posts using the More Tag.
You can disable that with the PHP Snippet provided here:

https://docs.generatepress.com/article/generate_more_jump/

[Author]

Posts