Be Theme Surfing Hover Links

Bradleylail · August 2015

Hello,

Tremendous theme, thank you! Just want to know what code you used to create the hover effect for Be Surfing and Be Bike Rental. I love them and would like to create my own for the website I'm creating.

Thank you!

Brad

Albert · August 2015

Hi Brad,

which links you mean exactly? Please explain and we'll try to help.

Bradleylail · August 2015

The parenthesis image that comes up when you hover over 'Home' , 'Our Company' , 'Rent a Board' , 'School', 'Contact' on the Be Theme Surfing Layout.

The same thing with the Bike Rental Theme. The X image that comes up when you over over the Mani Menu links.

Thank you

Brad

Albert · August 2015

For that kind of menu items we used custom css. For Be|Surfing demo we used below css for example:

/* Menu */
#Top_bar .menu > li > a span:not(.description) { letter-spacing: 5px;  font-weight: 900; padding: 0 15px; margin: 0 7px; position: relative; }

@media only screen and (min-width: 1240px) {

    #Top_bar .menu > li > a span:not(.description):before,
    #Top_bar .menu > li > a span:not(.description):after { content: ""; width: 9px; height: 100%; position: absolute; top: 0; }

    #Top_bar .menu > li.hover > a span:not(.description):before,
    #Top_bar .menu > li.current_page_item > a span:not(.description):before { display: block; background: url(http://themes.muffingroup.com/be/surfing/wp-content/uploads/2015/07/home_surfing_menu_left.png) no-repeat center center; left: 0; }
    #Top_bar .menu > li.hover > a span:not(.description):after,
    #Top_bar .menu > li.current_page_item > a span:not(.description):after { display: block; background: url(http://themes.muffingroup.com/be/surfing/wp-content/uploads/2015/07/home_surfing_menu_right.png) no-repeat center center; right: 0; }

}

ivanag92 · August 2015

Hi,

could you give me css you used for the same thing in Be BikeRental demo?

Albert · August 2015

@ivanag92 Sure. We're pasting it below:

/* Menu */
@media only screen and (min-width: 1240px) {
  #Top_bar .menu > li.current-menu-item > a span:not(.description),
  #Top_bar .menu > li.current_page_item > a span:not(.description),
  #Top_bar .menu > li.current-menu-ancestor > a span:not(.description),
  #Top_bar .menu > li.current_page_ancestor > a span:not(.description),
  #Top_bar .menu > li.hover > a span:not(.description) { background: url(http://themes.muffingroup.com/be/bikerental/wp-content/uploads/2015/05/home_bikerental_menu_bg.png) no-repeat center center; }
}
#Top_bar .menu > li > a span:not(.description) { border: 0; font-style: italic; }

ivanag92 · August 2015

Thank you!

Albert · August 2015

You're welcome

Be Theme Surfing Hover Links

Comments