The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Hover effect in the navbar

View previous topic View next topic Go down

Solved Hover effect in the navbar

Post by skouliki on May 30th 2016, 7:13 pm

hello i have now this square effect in the navbar which i dont like



and i would like something more modern like this below which i found in this site http://tympanus.net/Development/ClickEffects or something similar to it



forumhttp://keeponblogging.forumotion.com
invision

thank you


Last edited by skouliki on May 31st 2016, 6:39 pm; edited 2 times in total

skouliki
Graphic Designer
Graphic Designer

Female Posts : 1205
Reputation : 198
Language : english,greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

Solved Re: Hover effect in the navbar

Post by Van-Helsing on May 31st 2016, 1:57 am

Hello @skouliki
Find this CSS code in your CSS stylesheet:

Code:

#submenu ul li a {
    color: #000;
    margin: .5em 1em .65em 0;
    padding: .5em 1em .65em 0;
    text-decoration: none;
}

and replace it with this code:

Code:
#submenu ul li a {
    color: #000;
    margin: .5em 1em .65em 0;
    text-decoration: none;
}

Then add the following code in your CSS:

Code:

a.mainmenu :hover {
    border-radius: 100% !important;
    border: 8px solid darkgray;
    width: 50px !important;
    height: 50px !important;
    background: whitesmoke !important;
}

and press submit.

Van-Helsing
Hyperactive

Male Posts : 2198
Reputation : 82
Language : English, Greek

http://helpgr.forumgreek.com/

Back to top Go down

Solved Re: Hover effect in the navbar

Post by skouliki on May 31st 2016, 8:11 am

thanks for your answer
so the effect was not good made the buttons shrink like the image below with a white background and the navbar was trembling and moving when the cursor was on a button .
The old effect as you can see is still there so maybe thats the reason ...



in my css the only tag with submenu i have right now is this
Code:
#submenu ul li a { margin-right:-1em!important }
#submenu{
background: none repeat scroll 0 0 rgba(0, 0, 0, 0) ; }

skouliki
Graphic Designer
Graphic Designer

Female Posts : 1205
Reputation : 198
Language : english,greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

Solved Re: Hover effect in the navbar

Post by Van-Helsing on May 31st 2016, 11:21 am

Hello,
Find this code
Code:

#submenu{
background: none repeat scroll 0 0 rgba(0, 0, 0, 0) ; }

And remove it. On the third code which I gave you can change the background color as background: transparent; and modify the width and the height as you wish. Addional you can add the following code:

Code:
a.mainmenu {
height: 50px!important;
width: 50px!important;
}

to stabilize the dimensions on hover and normal menu options.
In both cases you must have the same dimensions in both codes.

Van-Helsing
Hyperactive

Male Posts : 2198
Reputation : 82
Language : English, Greek

http://helpgr.forumgreek.com/

Back to top Go down

Solved Re: Hover effect in the navbar

Post by skouliki on May 31st 2016, 12:34 pm

hello
so besides the width /hight which can be fixed the problems remained ..
the square effect didnt go away ...the trembling continues and the old background appears when i remove the first code
same things happened when i add the addional second code



at first place lets remove the old hover ...strange but i cant see any tag in the css for it

skouliki
Graphic Designer
Graphic Designer

Female Posts : 1205
Reputation : 198
Language : english,greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

Solved Re: Hover effect in the navbar

Post by Van-Helsing on May 31st 2016, 12:57 pm

Hello,
Can you check if are there any css parts in your templates like overall_header, overall_footer_end etc? The menu options are moving due the images are large and the hover effect adds the circle which needing some extra space to fit.

Van-Helsing
Hyperactive

Male Posts : 2198
Reputation : 82
Language : English, Greek

http://helpgr.forumgreek.com/

Back to top Go down

Solved Re: Hover effect in the navbar

Post by skouliki on May 31st 2016, 1:01 pm

@Van-Helsing wrote:Hello,
Can you check if are there any css parts in your templates like overall_header, overall_footer_end etc?
no i have a small css just the usual stuff , stats, votes, profile, thanks message
i remember this came with the theme at first place that hover

skouliki
Graphic Designer
Graphic Designer

Female Posts : 1205
Reputation : 198
Language : english,greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

Solved Re: Hover effect in the navbar

Post by Van-Helsing on May 31st 2016, 1:05 pm

Can you post here any css code related with your menu here like this?

Code:
#submenu ul li a { margin-right:-1em!important }

Somewhere there a padding rules on hover and making this problem.

Van-Helsing
Hyperactive

Male Posts : 2198
Reputation : 82
Language : English, Greek

http://helpgr.forumgreek.com/

Back to top Go down

Solved Re: Hover effect in the navbar

Post by skouliki on May 31st 2016, 1:12 pm

in my css i dont have any besides the one i mention above ..
Code:
#submenu ul li a { margin-right:-1em!important }
#submenu{
background: none repeat scroll 0 0 rgba(0, 0, 0, 0) ; }
i check in my templates, index, overall, footer,header ...no tag at all

skouliki
Graphic Designer
Graphic Designer

Female Posts : 1205
Reputation : 198
Language : english,greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

Solved Re: Hover effect in the navbar

Post by 10spetter10 on May 31st 2016, 1:19 pm

So I came up with this, it seems to do fine:

Code:
#submenu a.mainmenu {
  position: relative;
}
#submenu a.mainmenu:hover::after{
  border-width: 5px;
  border-radius: 100%;
  width: 50px;
  height: 50px;
}
#submenu a.mainmenu::after{
  content:" ";
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 0px;
  height: 0px;
  border: 0px solid #C6CCD4;
  border-radius: 100%;
  transition: 700ms;
}

For to remove the hover effect that works on your forum, remove this css:

Code:
#submenu ul li a:hover {
    background-color: #c5c7ca;
}

10spetter10
Forumember

Posts : 195
Reputation : 81
Language : Dutch

Back to top Go down

Solved Re: Hover effect in the navbar

Post by skouliki on May 31st 2016, 1:26 pm

hello10spetter10
thanks for your reply the new hover is perfect but i can remove the old one cause i dont have any css code at all


skouliki
Graphic Designer
Graphic Designer

Female Posts : 1205
Reputation : 198
Language : english,greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

Solved Re: Hover effect in the navbar

Post by 10spetter10 on May 31st 2016, 1:37 pm

You can overwrite it if you really can't find it:

Code:
#submenu ul li a:hover {
  background-color: transparent !important;
}

10spetter10
Forumember

Posts : 195
Reputation : 81
Language : Dutch

Back to top Go down

Solved Re: Hover effect in the navbar

Post by skouliki on May 31st 2016, 1:40 pm

yes thats solved the issue so topic Solved not yet
thanks both of you for your time and effort

edit @10spetter10
can i ask please something when i change the theme color the navbar appears with the old again hover

is this fixable? can we remove it
the color theme changer was made by @Ange Tuteur


skouliki
Graphic Designer
Graphic Designer

Female Posts : 1205
Reputation : 198
Language : english,greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

Solved Re: Hover effect in the navbar

Post by Rhino.Freak on May 31st 2016, 4:23 pm

Hello, as far as I think the color changer replaces your css with a new one. So obviously when the theme is changed, you lose the CSS you just added to the navigation bar.

Rhino.Freak
Active Poster

Male Posts : 1243
Reputation : 105
Language : English
Location : Mumbai, India

http://freetest.forumotion.net/

Back to top Go down

Solved Re: Hover effect in the navbar

Post by Ange Tuteur on May 31st 2016, 5:05 pm

The plugin I wrote overrides the default stylesheet by appending and removing a separate stylesheet in the <head> section of the document. You should be able to override the theme picker style by referencing a parent element such as body. Try adding this rule to your stylesheet :
Code:
body #submenu ul li a:hover {
  background-color:transparent !important;
}

The theme picker styles use !important to override any default styles, but you can override those styles by having body as the first selector in your selector set. ( or any parent for that matter ) It's the same for any !important rules setup by Forumotion, they can be easily overridden in this manner. Wink

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Hover effect in the navbar

Post by Rhino.Freak on May 31st 2016, 6:23 pm

@Ange Tuteur wrote:...but you can override those styles by having body as the first selector in your selector set. ( or any parent for that matter ) It's the same for any !important rules setup by Forumotion, they can be easily overridden in this manner. Wink

Oh. My. God. This changes everything. Why did I never think of it? XD
Infact if I include
Code:
html body
as a prefix, it'll have even higher priority than just
Code:
body
right?

Rhino.Freak
Active Poster

Male Posts : 1243
Reputation : 105
Language : English
Location : Mumbai, India

http://freetest.forumotion.net/

Back to top Go down

Solved Re: Hover effect in the navbar

Post by skouliki on May 31st 2016, 6:38 pm

thanks all for the informations and the solution
yes it worked perfect ..

topic is solved

skouliki
Graphic Designer
Graphic Designer

Female Posts : 1205
Reputation : 198
Language : english,greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

Solved Re: Hover effect in the navbar

Post by Ange Tuteur on May 31st 2016, 6:46 pm

@skouliki wrote:thanks all for the informations and the solution
yes it worked perfect ..

topic is solved
You're welcome Doff

@Rhino.Freak wrote:Oh. My. God. This changes everything. Why did I never think of it? XD
Infact if I include
Code:
html body
as a prefix, it'll have even higher priority than just
Code:
body
right?
@Rhino.Freak pretty much. The highest priority is html or :root and the lowest is the direct parent of the element you're selecting.
Code:
html body { background:yellow; }
body { background:red; }
The latter rule would override the former, but priority is given to the first rule because html is body's parent, therefore you cannot override body's styles unless you ask for permission from html. Razz


Normally you need !important to override the toolbar's color + existing properties :
Code:
#fa_toolbar {
  font-size:14px !important;
  font-family:Roboto !important;
  background-color:blue !important;
}

but you can reference body as the parent and save space :
Code:
body #fa_toolbar {
  font-size:14px;
  font-family:Roboto;
  background-color:blue;
}

Properties that are important however, will require you to use the !important flag.

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Hover effect in the navbar

Post by SLGray on May 31st 2016, 9:55 pm

Problem solved & topic archived.
Please read our forum rules: ESF General Rules


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35629
Reputation : 2372
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum