Editing Goran Dropdown Toggle in Main Nav

  • Resolved ESSBEEAY

    (@essbeeay)


    8 years, 10 months ago

    Hi,

    I’d like to be able to tweak the Dropdown-Toggle in the Main Navigation of the Goran Theme. I find the dropdown arrow a little too removed from the category to which it is linked.

    How can I remove the border around the dropdown arrow, and move the arrow a little closer to the category to which it is associated?

    Here is my site so far:
    https://www.100hands.org/scottys/

    I’d just like the arrow to be the same color as the menu items, and more discretely nestled up against the menu item PROJECTS in this instance.

    Thanks for any help.

    Scott

Viewing 3 replies - 1 through 3 (of 3 total)

  • I’d suggest you use a browser inspector, to see which styles are being applied to that menu item:

    .menu-item .dropdown-toggle::before {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #fff;
    content: "";
    display: block;
    left: 50%;
    margin-left: -4px;
    margin-top: -2px;
    position: absolute;
    top: 50%;
}

    You can override any of those elements in your custom CSS, for example to remove the borders and adjust the positioning.

    Also:

    .menu-item .dropdown-toggle {
    background: #302f2f none repeat scroll 0 0;
    border: 1px solid #212020;
    display: block;
    height: 32px;
    margin-top: -16px;
    outline: medium none;
    padding: 0;
    position: absolute;
    right: 0;
    top: 50%;
    width: 32px;
}
    Thread Starter ESSBEEAY

    (@essbeeay)

    Thanks for that. I had looked with an editor but when I looked in my stylesheet it was empty. I like to copy elements from the stylesheet into my custom CSS. I’ve since updated Goran and my stylesheet is visible now, which makes it much easier.

    Thanks again.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Editing Goran Dropdown Toggle in Main Nav’ is closed to new replies.