[Resolved] changing menu hamburger to PNG

Home Forums Support [Resolved] changing menu hamburger to PNG

Home Forums Support changing menu hamburger to PNG

  • This topic has 18 replies, 2 voices, and was last updated 3 years ago by Tom.
Viewing 15 posts - 1 through 15 (of 19 total)
  • Author
    Posts
  • #562216
    daryl

    Hi All,

    forgive me, I’m a graphic designer (specialising in print) and very new to wordpress.

    I’m trying to replace the menu icon to the right with the larger hamburger icon png i created which matches up with ‘a’ favicon.

    I’ve mangeged to get it up on the site just to show where I want it, but the tiny little menu button still appears underneath, which provides the actual link to open the menu.

    how do I get this png to replace the working menu button and working as the menu button does now, so I can discard the small menu button entirely

    I would also like it to act in the same way as the ‘a’ favicon, ie get smaller at the breaking point like the favicon does. I can’t find a quick and easy way to put my hambuger png icon in like i did with the favicon, also on smaller devices I’d still like the word’menu’ to appear next to it.

    Also I have a line underneath in the site header which i would like to appear on all devices just below the ‘a’ and the hamburger, and instead of going off the page would like the edges of the line to line up to the left edge of the ‘a’ circle… and the right edge of the hamburger circle. I’m probably being really stupid, but I’d also like them just to scroll down and maintain the line underneath and the logo and hamburger not to jump onto the sticky, which seems to be using a different size logos and different positions but I can’t seem to figure out and tell wordpress to use just the same header with line underneath all the way down as the page scrolls.

    please help

    kind regards
    Daryl

    GP Premium 1.6.2
    #562289
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Try doing this to add the icon:

    .slideout-toggle a:before {
        content: url(URL TO YOUR BIG IMAGE);
    }

    Then this for all mobile:

    .menu-toggle:before {
        content: url(URL TO SMALL IMAGE);
        width: auto;
        vertical-align: middle;
    }

    For the border, do this:

    .inside-header {
        padding-left: 0;
        padding-right: 0;
        margin-left: 40px;
        margin-right: 40px;
    }

    Once you get the above working, we’ll take a look at the sticky issue πŸ™‚

    #562451
    daryl

    Thanks Mike,

    the mobile screen now has the correct sized logo in, thanks for that..

    i’m struggling with the positioning though (on the mobile menu), and the little hamburger still appears, unfortunately nothing has changed with the line underneath either after adding the code, and it docent appear on the mobile site header at all:-(

    i’ve given a couple of samples below between how it looks now and the desired outcome… any help on this would be greatly appreciated

    how i’d like site header to look on computer screen
    how id like it to look
    https://aearyl.com/wp-content/uploads/2018/04/normal-size-menu.png

    how site header currently looks on computer
    screenshot on computer
    https://aearyl.com/wp-content/uploads/2018/04/Screenshot_computer-screen-as-is.png

    how i’d like site header to look on mobile screen
    how i'd like it to look on mobile
    https://aearyl.com/wp-content/uploads/2018/04/mobile-menu.png

    how site header currently looks on mobile screen
    screenshot of current mobile header
    https://aearyl.com/wp-content/uploads/2018/04/Screenshot-mobile-as-is.png

    the code is like double dutch to me but i’ll try my best, if it was print design i’d just grab it and move it ha ha πŸ™‚

    for the line I used some of your code previously to get the line in there
    .site-header {
    border-bottom: 2px solid #ffffff;
    }

    and adding the new code hasn’t done anything..

    all the codes I’m adding to the customising additional css screen.

    thanks again for your help

    #562626
    Tom
    Lead Developer
    Lead Developer

    I’m not seeing this CSS added:

    .slideout-toggle a:before {
        content: url(URL TO YOUR BIG IMAGE);
    }

    Instead, I’m seeing this:

    .slideout-toggle:before {
        content: url(URL TO YOUR BIG IMAGE);
    }

    Try the first snippet instead.

    I just adjusted the mobile snippet above, so it should work better: https://generatepress.com/forums/topic/changing-menu-hamburger-to-png/#post-562289

    I’m not seeing the .inside-header code I provided on your site. Did you remove it?

    #562680
    daryl

    thanks for your help Tom,

    worked a treat for the hamburger icon.

    for the line the code is in there but the line still goes off the edges… have I put the code in correctly?

    have i put this code in the right place?

    I’d also like the line to be a lot closer to the icons (i.e. to be the same px count as the icons are from the top of page so icons appear to be vertically centred, with a smaller overall height for the site header

    like this
    site header

    …and then the line to appear on all devices…

    and when we get that sorted, the whole site header to just scroll down as the user scrolls down

    again thanks for your help with this… amazing theme πŸ™‚

    #562875
    Tom
    Lead Developer
    Lead Developer

    Ah, try changing:

    .site-header {
        border-bottom: 2px solid #ffffff;
    }

    To:

    .inside-header {
        border-bottom: 2px solid #ffffff;
    }

    Then reduce the bottom header padding in Customize > Layout > Header.

    There also seems to be some sort of issue with your BB/slider on the home page right now?

    #563285
    daryl

    thanks Tom, thats really worked well for the width of the line…

    I tried to get the height padding down too, and added a 0 value which has pushed it up closer to the icons, but not enough it seems?, unfortunately its still not the same height as the gap at the top, which was 10 at the time .. but i’d still like to shorten the overall height of the site header so made the top gap 5 now, but the bottom gap won’t reduce any further and i’ve got it at 0, is there a work around for this please, to get it to be the same gap as the top, and thus shortening the overall height?

    Also if the same line could appear on mobiles that would be great, it currently doesn’t unfortunately? .. and then after that, the whole header just to scroll down as the user goes down the page πŸ™‚ apologies for asking too much… i’m so new to websites and coding seems like learning to read again πŸ™‚

    btw for the BB, I was just testing a few sliders so it looks a little broken at the moment…. but going to replace it with this page for the home https://aearyl.com/about-2-3/ (am testing a few siders on this page too)

    again thanks so much for your help πŸ™‚

    #563477
    Tom
    Lead Developer
    Lead Developer

    Let’s try this instead:

    1. Set your navigation as your header: https://docs.generatepress.com/article/navigation-logo/#navigation-as-header

    2. Add this CSS:

    .main-navigation:not(.slideout-navigation) {
        margin-left: 30px;
        margin-right: 30px;
        width: auto !important;
        border-bottom: 1px solid #fff;
    }

    3. Reduce your menu item height in Customize > Layout > Primary Navigation and Customize > Layout > Sticky Navigation.

    That should give you the exact result you’re looking for – along with the sticky navigation πŸ™‚

    #564499
    daryl

    Hi Tom,

    thanks for your instructions
    Everything’s gone astray unfortunately.
    Am i doing something wrong?

    if I put the hamburger on the right hand side, the menu items get shifted to almost off the screen , so have to make it left aligned so that menu items are where I need them to be, but it means the hamburger shifts over to the left which i don’t want.(i’ve attached the screenshot of the position i like the menu items in which they are now )

    also the line now works on the scroll down which is good, and is the correct width (on just the scroll down) but I don’t seem to be able to control the height of site header without making the ‘a’ icon virtually disappear? so it’s the same spacing as before and I’ve completely lost the two icons lining up vertically and the positioning of the hamburger (as above).

    Also, if I make the ‘a’ bigger it stays that size on mobiles too, whereas before it was working quite nicely on mobiles and everything was lining up, but we only needed to add the line and make the whole header move down on scroll.

    and finally, when the page opens up, the line now appears all the way across again, it’s ok as you scroll down the screen with the correct padding, but the line goes right off the edges again when at the top off the page..

    Sorry about this …I know now why I’ve shied away from web design and coding till now ha ha

    any help will be greatly appreciated

    screenshots attached

    1

    2

    3

    thanks
    Daryl

    #565081
    Tom
    Lead Developer
    Lead Developer

    So what happens if you set the navigation alignment to the right?

    Also, it doesn’t work setting the menu item height to something smaller (50px-is) in Customize > Layout > Primary Navigation?

    #565661
    daryl

    Hi Tom,

    Here’s some screenshots to show what happens.

    if i send to right the hamburger goes off the page

    1

    and the menu items are right aligned (which isn’t too bad visually on desktop, but then doesn’t look correct on the mobile)

    2

    3

    if I make the header height smaller … the icon height disappear virtually.. shown in the grey area

    and doesn’t seem to have much effect on the overall position of the line

    and when i make the icons the correct height 120px it loses its nice formatting on mobiles that it had before

    .. and when it’s at the top of the home page the line still goes off the edges

    I would love it to look like this and just scroll down the page

    and on a mobile like this and then just scroll down

    Again thanks so much for your help in this…

    am i doing anything wrong from what you see from the screenshots?

    #565899
    Tom
    Lead Developer
    Lead Developer

    We’ll tackle this bit by bit, because there’s definitely some strange things happening.

    New CSS – add this instead of what you have above:

    .main-navigation:not(.slideout-navigation) {
        margin-left: 30px;
        margin-right: 30px;
        width: auto !important;
        border-bottom: 1px solid #fff;
    }
    
    .slideout-toggle a:before {
        content: url(URL TO YOUR LOGO);
        width: 100px;
    }
    
    .menu-toggle:before {
        content: url(URL TO SMALL IMAGE);
        width: 50px;
        vertical-align: middle;
    }
    
    #mobile-header {
        width: calc(100% - 60px) !important;
    }

    Once you have your old CSS removed and this added, let me know. This should give us a step in the right direction.

    Let me know πŸ™‚

    #565982
    daryl

    Hi Tom,

    thats great, that part has worked a treat πŸ™‚ thank you so much

    I added vertical-align: middle; to the below part of the code (the line was a bit far off so I put this on) so the line is now close to the A and the hamburger … and everything is lined up vertically, and while header is much shorter which is exactly right on desktops:-).. let m know if i’m meant to the this out though in case you were going to add more code and It’ll mess the next step?

    .slideout-toggle a:before {
        content: url(https://aearyl.com/wp-content/uploads/2017/11/hamburger-icon.png);
        width: 100px;
    	vertical-align: middle;
    }
    
    so the only part now to be fixed is the big 'a'... which is fine on desktop, but still says the same big size on mobiles... if theres a fix for this part too, that would be amazing ;-) and think the header would be done once this part is fixed :-)
    
    again thanks so much for your help 
    
    D
    
    
    #565983
    daryl

    apologies for the few spelling mistakes on that.. 14 hour days here with work πŸ™‚

    hopefully it still makes sense though

    #566001
    Tom
    Lead Developer
    Lead Developer

    Getting there!

    Now, what happens if you set your menu item height to around 60px on mobile in Customize > Layout > Primary Navigation?: https://www.screencast.com/t/LwXduKvHpMF

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