-
AuthorPosts
-
August 27, 2019 at 7:43 pm #1131435
Hi, Im desperately trying to achieve a header like the attached – https://ibb.co/yh0xrVj
Im pretty close – http://hamiltonmercer-co-uk.stackstaging.com/
I’d like to place the ‘Header Widget area’ where the social icons are and float the logo left.Currently have ‘logo centred, menu below’ but of course happy to change this.
Can anyone point me to the right CSS to achieve this?
Many thanks in advance
ToddAugust 28, 2019 at 12:10 pm #1131573Hey,
I added following code to Style.css in Appearance > Editor
#top #header #header_main .widget { position: absolute; right: 0; }
To move your widget area to the right side of header area. if you need further assistance, please let us know :)
Best regards,
YigitAugust 28, 2019 at 1:55 pm #1131596Hey Yigit,
Thanks so much, thats amazing.Can you tell me how I’d make this 3 widgets so I can put in the icons as per the attachment?
https://ibb.co/yh0xrVjAlso is it possible to centre the nav, Ive tried a few examples from previous threads but not found one that works.
Thanks again
ToddAugust 28, 2019 at 2:56 pm #1131615Hi,
1- I slightly adjusted your widget and changed the code to following one
#top #header #header_main .widget { position: absolute; right: 0; z-index: 9; background: transparent; } .header-wid { margin-right: 30px; }
2- I chose to center logo and menu and then added following code to Style.css file
.html_header_top.html_logo_center .logo { left: 0; -webkit-transform: none; -ms-transform: none; transform: none; }
Please review your website :)
Best regards,
YigitAugust 28, 2019 at 3:27 pm #1131624Hi Yigit,
thanks again for the superb help, sorry Ive tried copying across to the live site but must have missed something. Could you take a look please – live login details in Private content.
Also is there a way to make the contact details move to above the logo on mobile view?
cheersTodd
August 28, 2019 at 3:38 pm #1131626Hi,
Seems like you have deleted icons, other than that, it looks fine to me. Attached a screenshot in private content field. Could you please point out the changes you would like to make?
Best regards,
YigitAugust 28, 2019 at 3:45 pm #1131629Hi Yigit, I couldn’t see where the icons where coming from? On the test site the ‘header’ widget just had text in, have I missed something? Was there another widget you created – header-wid?
Then I just wondered if there is a way it can jump above the logo on mobiles as the burger menu currently overlaps the icons
Thanks
August 29, 2019 at 5:00 pm #1131996Hi Yigit, I think I can see whats going on. Theres data in my header widget but it only flickers up when I press the drop down button.
Heres a grab of the code I’m missing on the live site. https://ibb.co/4tYqDpb
Are you able to paste in the code in this support and I’ll add.
Thanks again
ToddSeptember 2, 2019 at 6:34 am #1132833Hi,
Thank you for the update.
Were you able to fix the issue? The icon is visible in the header and it doesn’t overlap the mobile menu. And it looks you’re not actually using widgets. Did you add the elements directly inn the header template?
Best regards,
IsmaelSeptember 2, 2019 at 7:51 am #1132852HI Ismael,
Yep all sorted thanks. Used the extra elements and moved into the main header area using CSS.
Thanks for the previous help, nice one.
ToddSeptember 2, 2019 at 2:57 pm #1133017Hi Todd,
Great, I’m glad that you got it working and thanks for the update. Please let us know if you should need any further help on the topic or if we can close it.
Best regards,
RikardSeptember 2, 2019 at 6:14 pm #1133086Please do close the ticket, all great! thanks loads
ToddSeptember 3, 2019 at 4:22 am #1133177 -
AuthorPosts
- The topic ‘Header Widget settings’ is closed to new replies.