Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • May 27, 2015 at 7:51 pm #450782
    alex5252

    Hi,

    Here is the look I am trying to achieve: http://marckdesignconcepts.com/bio/wp-content/uploads/2015/05/Screen-Shot-2015-05-27-at-12.44.32-PM.png

    Here is the site: http://marckdesignconcepts.com/bio/

    Basically I would like each menu item to be 16.66% of the screen, so all 6 items take up the same amount of space.

    The next thing I would like to do is move the dotted lines above the menu items instead of below. Right now I am using the following as the menu title to achieve the dotted line below: Home <hr style=”border-top: dotted 1px;” />
    How can I move that line above the menu items?

    I would also like the remove the horizontal line that is between the logo area and menu AND the line that is between the content area and the socket. How would I remove those?

    Thank you for the help!

    • This topic was modified 9 years, 7 months ago by alex5252.
    May 28, 2015 at 10:12 am #451053
    Ismael

    Hi alex5252!

    Thank you for using Enfold.

    You can try this in the Quick CSS field:

    .av-main-nav > li {
  line-height: 30px;
  width: 16.66%;
}

.avia-menu-text hr {
  margin: 10px 0 0 0;
}

    Then adjust the menu label to something like this:

    <hr style="border-top: dotted 1px;"><span class="menu-label">Home</span>

    Use css media queries to adjust the menu style on smaller screens.

    Best regards,
    Ismael

    May 28, 2015 at 3:52 pm #451213
    alex5252

    Thank you! That worked perfect!

    Is there any way to remove the thin horizontal black line that is between the logo area and the menu tabs?

    May 28, 2015 at 4:28 pm #451249
    Yigit

    Hey!

    Please add following code to Quick CSS as well

    #header_main_alternate {
  border: none !important;
}

    Regards,
    Yigit

    May 28, 2015 at 4:29 pm #451251
    alex5252

    Perfect! Thank you, you guys rock!

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Make menu fullwidth and each menu item the same width’ is closed to new replies.