Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Adding drop down on custom WP menu.

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #268002
    motionair
    Participant

    Hi!

    I have a custom menu in my wordpress theme, i set it up maybe two years ago with a lot of help from this forum. Thanks!
    Now, after some time i want to update it with a drop down option. I only want it on the Services tab, that way i can try to do the rest based on that to learn some on the way…
    My plan is to add 4 or 5 options under “Services”

    I have tried difrent solutions, but i have come nowhere, does anyone have tips on how to get started? Most guides i find are based on the built-in WP menu system, not all custom.

    Thanks for the attention and all responses are greatly appreciated!

    -R


    /* FANCY NAV */ .nav-wrap { font-size: 130%; font-weight: 500; margin: 0 auto; padding-top: 2.8em; background-color: white; padding-bottom: 0px; } #fancy-nav { margin: 0 0 0.4em 0; position: relative; display: flex; justify-content: space-between; text-align: center; } #fancy-nav li { list-style: none; white-space: nowrap; } #fancy-nav li a { position: relative; z-index: 200; color: black; font-size: 1.3em; display: flex; text-decoration: none; padding: 0.4em 1.5em 0; } #fancy-nav li a:hover { color: #3598b7; } /*EDITING MOTION AIR LOGO. */ #fancy-nav :nth-child(3) { width: 170px; background-image: url("http://motionair.no/wp-content/uploads/2016/03/motionair_logotypo_v01_blue.svg"); background-position: center 18px; background-repeat: no-repeat; background-size: 170px ; } #fancy-nav { font-size: 16px; } #fancy-nav #magic-line-two { position: absolute; top: -39px; left: 0; width: 100%; background-image: url("http://motionair.no/wp-content/uploads/2016/03/motionair_logosymbol_v01_blue.svg"); background-position: top center; background-size: 44px 44px; background-repeat: no-repeat; z-index: 100; display: block !important; } .current_page_item_two a { color: #3598b7 !important; } .ie6 #fancy-nav li, .ie7 #fancy-nav li { display: inline-block; } /* FANCY NAV OVER */
    #268055
    Atelierbram
    Participant

    These navbars are some of the trickier things in webdesign, and to make it work on all devices, it was not a bad idea to take something existing that works and is well tested and integrate it with your custom navbar. But the problem with a dropdown in combination with the hover-effect “magic-nav” is the fact that the parent list-items can’t have a position of relative on them, or the magic-nav would not work. To solve this one can wrap the drop-down child list in a div with position relative applied.

    https://codepen.io/atelierbram/pen/JLjNzy

    I slightly adapted the CSS of [https://github.com/thednp/navbar.js](this thing) to work with alongside the CSS that is already there. Obviously this still needs a lot of work, for example the conflicting styles and implementation on mobile.

    #268162
    motionair
    Participant

    Thank you for the response.

    I guess this is a little over my head coding wise, i have a tendency to aim a little higher then my skills allow. I noticed that the div tag you wrapped the drop down in actually positions the logo in the wrong place. Is this possible to make it work or is that part of the problem you are describing?
    i guess this would be easier if i only need this menu for desktop views? i think i will downgrade smaller screens to a regular menu to save the trouble.

    Again, thank you for taking the time,
    -R

    #268177
    Atelierbram
    Participant

    The positioning needs work, so yeah probably part of the problem, but nothing that can’t be fixed. Unfortunately I don’t have time to help bringing this thing further now, but maybe someone else can.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.