-
AuthorPosts
-
February 26, 2026 at 6:44 am #1495516
Hello, can you look at my CSS and see if it looks ok? I am trying to move down the text areas and button in the Hero section.
How do I just move that area down, so it is centered better between logo and bottom?
Also, with centered logo, is there way to add Social Media icons or not?
February 26, 2026 at 6:45 am #1495517Also, how can I get the rounded button corners, and possible images to have rounded corners?
February 26, 2026 at 7:00 am #1495518Sorry, I think I fixed the positioning. Can you just see how it looks on mobile view? Can we make the logo larger and maybe add social media icons? not sure if that will be too busy. Maybe just bigger logo and bigger menu burger?
THanks!!
February 27, 2026 at 8:31 pm #1495577Please let me know on these when you can. thanks!
February 27, 2026 at 10:16 pm #1495582Hi,
This is how it looks on my mobile:

The logo & burger menu both look large to me, do you still want them larger?
If you want to show the social icons on mobile, I recommend showing them in the top bar, but this will also show on desktop, probably not what you want.
How about adding the social icons to mobile menu?Best regards,
MikeFebruary 28, 2026 at 12:12 am #1495585mine shows different and off center. How do I adjust sizes and position?
https://drive.google.com/file/d/18drlqw6M6q3U4a34w5TRLTLjYtNkA81P/view?usp=sharing
Also, how can I get the rounded button corners, and possible images to have rounded corners?
February 28, 2026 at 12:23 am #1495586next
-
This reply was modified 5 days, 8 hours ago by
bemodesign.
February 28, 2026 at 12:26 am #1495587I got the rounded corners, just let me know where i can adjust size and position for both logo and burger.
And the Burger Icon is not centered to the logo when it shrinks on mobile view.
thanks!
February 28, 2026 at 3:27 pm #1495601Hi,
There is not a setting, you will need to use css. Since I’m not seeing the same as you I had to guess a little, try the following css and adjust to suit:@media only screen and (max-width: 767px) { #top .logo img { max-height: 140px; } #top .logo img { left: 55%; transform: translateX(-50%); } #top .av-burger-menu-main { transform: translateY(-38%) !important; } .av-hamburger-box { width: 50px!important; } .av-hamburger-inner::before{ top: -15px; } .av-hamburger-inner::after { bottom: -15px; } .av-hamburger-inner, .av-hamburger-inner::before, .av-hamburger-inner::after { height: 6px; } }This is how it looks for me with this css:

Best regards,
MikeFebruary 28, 2026 at 9:08 pm #1495624this is great!
1. can I have the header “shrink” a little when scrolling on mobile?
2. Now that logo is bigger, it is too close to Headline and text area with button. How can I move all this down a little? or do I add a space above the header?
thanks!
March 1, 2026 at 3:12 pm #1495637Hi,
To shrink the header and logo on mobile scroll I added this css to the end of your Quick CSS field:/* mobile shrinking header */ @media only screen and (max-width: 767px) { #top #header:not(.av_header_transparency) #header_main > .container { height: 70px !important; line-height: 70px !important; } .responsive #top #header:not(.av_header_transparency) .logo img { height: 60px !important; } .responsive #top #wrap_all #header:not(.av_header_transparency) .main_menu { top: -12px; } }adjust to suit.
As for moving the logo up away from the text try this css and adjust to suit:.responsive #top #header .logo img { top: -10px; }but you don’t have much room in the header, so you may need to adjust the previous css that changed the size of the logo to suit, I can not because I don’t see the same as you do, to me it looks like plenty of room:

Best regards,
MikeMarch 2, 2026 at 6:25 am #1495651you are awesome!!
March 2, 2026 at 9:15 pm #1495669Hi,
Thanks, glad that we could help, if you have further questions please open a new thread and we will try to help. Thanks for using Enfold.Best regards,
Mike -
This reply was modified 5 days, 8 hours ago by
-
AuthorPosts
- The topic ‘Mobile view – Hero text position’ is closed to new replies.
