Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • April 25, 2017 at 5:29 am #782630
    cpita

    My website is creativepita.com, my main menu is set up on left sidebar. Right after the main menu I have 2 social media link that once you hover over them, they change color. How can I accomplish that for the main menu but I would like the color to be full width. I would also like to add a contact me banner in between the logo and Home main. Is it possible?

    April 25, 2017 at 1:36 pm #782862
    Sarah

    Hey Carlos,

    For your menu, please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

    
.html_header_sidebar #header .av-main-nav > li {margin: 0 !important; padding: 0 39px !important; }
.html_header_sidebar #header .av-main-nav > li:hover {background-color:#00b3ff;}

    Please edit the color to suit your preference.

    I’m not quite sure what you mean by Contact Me banner. Are you saying you would like to put another image right after your logo? Can you show us a screenshot or drawing of what you would like to achieve?

    Best regards,
    Sarah

    April 25, 2017 at 5:18 pm #782994
    cpita

    Thank you so much for the help Sarah!

    Regarding the main menu, I want similar to this website http://drdangeller.com where you will see a line that runs full width only on the main menu section. The hover color effect is perfect, is it difficult to add the line?

    Regarding banner, on my site http://www.creativepita.com if you see where the facebook banner is on left bottom, can that go in between the logo and main menu section?

    Thank you so much!

    Carlos

    April 26, 2017 at 3:28 pm #783539
    Sarah

    Hey Carlos,

    For the menu, if you’d like the lines between the menu items, use this instead of the code that I gave you:

    .html_header_sidebar #header .av-main-nav {  border-bottom: 1px solid #00b3ff; }
.html_header_sidebar #header .av-main-nav > li {margin: 0 !important; padding: 0 39px !important; border-top: 1px solid #00b3ff; }
.html_header_sidebar #header .av-main-nav > li:hover {background-color:#00b3ff;}

    If you’d like the hover animation where the text and background moves, that’s also possible but would require some custom CSS to make it happen. You can look for code that does that, or hire someone to help you.

    Best regards,
    Sarah

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