[Resolved] changing menu hamburger to PNG

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

https://aearyl.com/wp-content/uploads/2018/04/normal-size-menu.png

how site header currently looks 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

https://aearyl.com/wp-content/uploads/2018/04/mobile-menu.png

how site header currently looks on mobile screen

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

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?

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

…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 🙂

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 🙂

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

thanks
Daryl

Hi Tom,

Here’s some screenshots to show what happens.

if i send to right the hamburger goes off the page

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

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?

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