-
AuthorPosts
-
July 7, 2020 at 12:14 pm #1228560
I have site setup with Logo Left and Menu Below. I would like to put a button or link into the space right aligned in the logo area. Cant see how this is possible?
July 7, 2020 at 7:01 pm #1228663Hey erron,
It is better to add a custom widget area to the header and add the button there, and then we can help you adjust it.
Here are the docs for you:
Best regards,
VictoriaJuly 26, 2020 at 1:54 am #1233249Hi,
Thanks, i have made the custom header widget and can display some text. Just need to make it right aligned on the same line as the logo now? See image in private content of where it is (Free Lesson) and the red circle for where i want it to go.July 26, 2020 at 4:41 am #1233265Hi erron,
Please remove it from the main menu since it would be hard to position it via CSS.
Please follow the instructions provided by Victoria and we’ll try to help with the CSS code to properly align it.Best regards,
NikkoJuly 26, 2020 at 6:42 am #1233287Nikko,
Victoria said to add a custom widget area to the header which i have done using this guide
the result is the screenshot shown.
July 26, 2020 at 10:02 am #1233293Hi erron,
I don’t see the widget there anymore. Did you remove it?
Best regards,
VictoriaJuly 26, 2020 at 10:27 am #1233296I did yes as its a live site. I have added it again now.
July 26, 2020 at 10:53 am #1233307Site details added to private content.
July 26, 2020 at 11:12 am #1233315Hi erron,
Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
#top #text-4 { width: 10vw; float: right; top: 60px; padding: 0; } #top #text-4 p { text-align: right; padding-right: 20px; }
If you need further assistance please let us know.
Best regards,
VictoriaJuly 26, 2020 at 11:46 am #1233318I added as instructed and i got basic text widget displaying in the correct spot.
Once i tried editing the CSS it has move to left align above logo again even when i removed any associated CSS (basic text only currently).
I tried added the above code to both areas and still stuck above logo left aligned.
July 26, 2020 at 2:53 pm #1233339Hi erron,
There was an error in your Quick css and the widget id changed. Did you changed the widget?
Anyway, you can check now.
Best regards,
VictoriaJuly 27, 2020 at 2:10 am #1233408That works yes, I changed the widget yes, and i just changed it again because i changed it to HTML, how do i identify the widget ID to put in the CSS?
July 27, 2020 at 11:10 am #1233478Managed to get ID from the database, have custom_html right aligned now but it seems to be ignoring any of the CSS and the href that is applied to it. Displaying as plain text with no link or border.
Widget is Custom HTML as
<a href="#">CLAIM YOUR FREE LESSON HERE</a>
CSS is:
#top #custom_html-2 { width: 10vw; float: right; top: 60px; padding: 0; border: 5px blue; border-radius: 5px; } #top #custom_html-2 p { text-align: right; padding-right: 20px; border: 5px blue; border-radius: 5px; }
- This reply was modified 4 years, 5 months ago by erron.
July 28, 2020 at 7:38 am #1233671Hi,
The CSS is applying, this is what I see on my end:
#top #custom_html-2 { width: 10vw; float: right; top: 60px; padding: 0; border: 5px blue; border-radius: 5px; }
If you are referring to the border then please try this instead:
border: 5px solid blue;
Best regards,
RikardJuly 28, 2020 at 7:58 am #1233680Hi,
Almost there, changed it to a nav_menu and i can see that CSS is applied from the custom css (but not the menu) but that is fine, biggest issues are firstly that the link isnt clickable on the text, only on a small invisible box to the right of the text and the text is wrapping.
How do it:
1. Increase area so it doesnt wrap?
2. Increase link area to include entire text?July 30, 2020 at 2:35 am #1234036Hi erron,
Can you try to replace this CSS code:
#top #nav_menu-2 { width: 10vw; float: right; top: 60px; padding: 0; border: 5px solid #659ce0; border-radius: 5px; }
with:
#top #nav_menu-2 { width: 230px; float: right; top: 60px; right: 20px; padding: 0; border: 5px solid #659ce0; border-radius: 5px; text-align: center; position: relative; z-index: 200; }
Best regards,
NikkoAugust 8, 2020 at 1:24 am #1236156Hi guys,
Almost there, the button will now show above 1200 and disappear below it but it seems to appear on the left below 1200Over 1200 width it looks like this
And below it, disappears on the right, appears on left (with no formatting)
Current CSS looks like this:
/* Activate free lesson button */ @media only screen and (min-width: 1200px) { #top #nav_menu-2 { width: 230px; float: right; top: 60px; right: 20px; padding: 0; border: 5px solid #659ce0; border-radius: 5px; text-align: center; position: relative; z-index: 200; } #top #nav_menu-2 p { text-align: right; padding-right: 20px; border: 5px solid #659ce0; border-radius: 5px; } #top #header .av-main-nav .av-menu-button-bordered { display: none!important; } }
August 11, 2020 at 7:11 am #1236589Hi erron,
It disappears because of this code:
#top #nav_menu-2 { display: none!important; }
in
/* De-Activate free lesson button */ @media only screen and (max-width: 1199px) { #top #nav_menu-2 { display: none!important; }
please remove it and it should show properly below 1200px.
Best regards,
Nikko -
AuthorPosts
- You must be logged in to reply to this topic.