Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • July 7, 2020 at 12:14 pm #1228560
    erron

    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 #1228663
    Victoria

    Hey 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:

    Header

    Best regards,
    Victoria

    July 26, 2020 at 1:54 am #1233249
    erron

    Hi,
    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 #1233265
    Nikko

    Hi 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,
    Nikko

    July 26, 2020 at 6:42 am #1233287
    erron

    Nikko,

    Victoria said to add a custom widget area to the header which i have done using this guide

    Header

    the result is the screenshot shown.

    July 26, 2020 at 10:02 am #1233293
    Victoria

    Hi erron,

    I don’t see the widget there anymore. Did you remove it?

    Best regards,
    Victoria

    July 26, 2020 at 10:27 am #1233296
    erron

    I did yes as its a live site. I have added it again now.

    July 26, 2020 at 10:53 am #1233307
    erron

    Site details added to private content.

    July 26, 2020 at 11:12 am #1233315
    Victoria

    Hi 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,
    Victoria

    July 26, 2020 at 11:46 am #1233318
    erron

    I 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 #1233339
    Victoria

    Hi 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,
    Victoria

    July 27, 2020 at 2:10 am #1233408
    erron

    That 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 #1233478
    erron

    Managed 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, 4 months ago by erron.
    July 28, 2020 at 7:38 am #1233671
    Rikard

    Hi,

    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,
    Rikard

    July 28, 2020 at 7:58 am #1233680
    erron

    Hi,

    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 #1234036
    Nikko

    Hi 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,
    Nikko

    August 8, 2020 at 1:24 am #1236156
    erron

    Hi guys,
    Almost there, the button will now show above 1200 and disappear below it but it seems to appear on the left below 1200

    Over 1200 width it looks like this
    above1200

    And below it, disappears on the right, appears on left (with no formatting)
    below1200

    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 #1236589
    Nikko

    Hi 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

  • Author
    Posts
Viewing 18 posts - 1 through 18 (of 18 total)
  • You must be logged in to reply to this topic.