-
Posts
-
I have created a header widget area using this help file: https://kriesi.at/documentation/enfold/adding-a-widget-area-to-the-header/
I have added an email us and call us button to that widget area on my site here
and am wondering how I can set them to be next to each other instead of stacked one on top of another in both desktop and mobile?
ThanksHey amerzib,
Please try the following in Quick CSS under Enfold->General Styling:
#header_main .ls-button-widget-container { display:inline-block !important; }Best regards,
RikardThanks, that worked, I added some styles to align the buttons on the right and put padding in between them like this:
#header_main .ls-button-widget-container {
display:inline-block !important;
padding: 10px;
top: 40px;
left: 80%;
}But now I need to move the buttons down to below the menu items and the main menu items up a bit.
And the sticky/shrinking header needs to be taller now.And also the buttons do not show up correctly on mobile.
They are too far down and the email us button is cut off. on the rightHi,
Thanks for the feedback, though I think you will need quite a lot of styling to get that looking right to be honest. Wouldn’t it be better to add those links to your main menu and select to style them as buttons? You can select that for each menu item under Appearance->Menus.
Best regards,
RikardOk, I didnt realize I could do that. I’ll give it a try.
Will I able to position the buttons I make within the main menu to be underneath the other navigation items that arent buttons?Hi,
No, you wouldn’t be able to position them under the menu, unless you use custom CSS. Either option you would like to take, I think you will have to spend a lot of time to get those buttons looking right to be honest. Your easiest option would be to leave them on the same line as the rest of the menu.
Best regards,
Rikard
- The topic ‘Header widget area styling’ is closed to new replies.