Styling a Fullwidth Sub Menu - Support | Kriesi.at

Tagged: CSS, full-width submenu

Viewing 12 posts - 1 through 12 (of 12 total)

Author

Posts
October 27, 2016 at 10:55 pm #705063

JeeBar
Participant

I’d like to do several things to the sub-menu on this page: https://solace2.staging.wpengine.com/blog
Been banging my head against CSS and searching forums, can’t figure it out, even using a custom CSS selector.
Can you please help?

1) Increase font size
2) Increase height of submenu
3) Assign a specific color to each element, from top of menu to bottom
4) Assign a slightly darker color to each element on hover

To look like this (colors are for show only, haven’t picked palette yet…)

P.S. Do y’all provide documentation that describes the many and varied CSS selectors that go into the site? Can’t find but would seem to eliminate a hell of a lot of support forum requests.

October 29, 2016 at 3:33 pm #705514
Vinay
Inactive Moderator
Hey JeeBar,

Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:
```
/* Multi color menu items*/
#avia-menu .menu-item:nth-child(1) { background-color: gold; }
#avia-menu .menu-item:nth-child(2) { background-color: red; }
#avia-menu .menu-item:nth-child(3) { background-color: green; }
#avia-menu .menu-item:nth-child(4) { background-color: grey; }
#avia-menu .menu-item:nth-child(5) { background-color: black; }
#avia-menu .menu-item:nth-child(6) { background-color: yellow; }
#avia-menu .menu-item:nth-child(7) { background-color: purple; }
#avia-menu .menu-item:nth-child(8) { background-color: blue; 
padding-right:20px!important;
}

#avia-menu .menu-item:hover:before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom:0;
	left: 0;
 background-color: rgba(0,0,0,.5); 
}

/* Submenu height */
#top #wrap_all .av-main-nav ul > li > a {
    line-height: 40px;
}
```
We do have documentation section but at the moment we do not cover the css class names but if you still like to have a look at it please refer to http://kriesi.at/documentation/enfold/

Best regards,
Vinay
October 29, 2016 at 8:35 pm #705646

JeeBar
Participant

That styled my site’s MAIN menu at the top of the page. Quite colorful and fun, but not what I’m going for. : )

I need to style a “Full Width Sub-Menu” element within a page.
In fact, just one specific one, seen on just this one page for now, which I’ve assigned CSS class of “blogsubmenu:

November 1, 2016 at 4:57 pm #706787
Andy
Inactive Moderator
Hi,

here you go:

1.) + 2.):
```
.blogsubmenu .avia-menu-text {
font-size: 10px;
height: 100px !important;
}
```
3.):
```
.blogsubmenu .menu-item-top-level-1 a {
background-color: red;
}
```
Adjust level number as needed.

4.):
```
.blogsubmenu .menu-item-top-level-1 a:hover {
background-color: black;
}
```
Adjust as needed.

Best regards,
Andy
May 24, 2020 at 7:59 am #1215658

robertopane
Participant

Dear Sirs

Can you please be so kind to provide one more little piece of code to implement the following functionality on the Fullwidth Sub Menu

On hover I require the backround color of the element to change, and on mouse click I would like the highlighed back round color to remain sticky until another mouse click occurs on a different element.

In other words what I would like to have is the following behavior:
1. On hover change font size/color and change back round color (this is already well explained)
2. On click keep the backround color activated (remain sticky) until another click occurs on another element of the fullwidth menu

Thank you for your help and advise

Regards
Roberto

May 24, 2020 at 1:25 pm #1215736

Victoria
Inactive Moderator

Hi Roberto,

Could you please give us a link to your website, we need more context to be able to help you.

Could you please attach a mockup of what you’re trying to achieve?

Best regards,
Victoria

May 25, 2020 at 8:22 am #1216014

robertopane
Participant

Hello Victoria,

I here attach a link to my WIP staging web site.
As you can se on every page there is a fullwidth sub menu. (that remains sticky to the top)
The current situation is:
(font color is black backround color is white)
on hover (font color turns green backround remains white)
on click (the link is followed the font color is black the backround color is white)

What I would like to implement is:
1. font color is black backround color is white)
2. on hover (font color turns white backround turns green)
3. on click (the link is followed, font color REMAINS sticky white, backround REMAINS sticky green)
4. on a new click on a full width sub menu tab point 3 is replayed

Of course status 3 is applied also if the selection comes from the menu list.

In other words I want the user to easly grasp understanding what section of the page he is currently navigating in.

PS I have found a similar functiontiy in the Tabs Element ( It is very esay for the user to understand which tab he is look at because it remains selected and highlighted.)

Sent link to my web site on private content

Regards

May 26, 2020 at 10:22 am #1216424

robertopane
Participant

Hello Victoria,

Please just confirm that you have recieved my request and that you are dealing with it

Thank you so much

Roberto

May 29, 2020 at 12:14 am #1217549

robertopane
Participant

Dear Sirs

I am resubmitting this request for support as I have not recieved any affermative answer if support is going to be provided. or if there is a solution to my request for assistance on customizing the Fullwidth Sub Menu.
____________________________
Can you please be so kind to provide one more little piece of code to implement the following functionality on the Fullwidth Sub Menu

1. On hover I require the backround of the element tag to change color for example change from white to green
2. On successive mouse click selection I would like the selected tag alterantive backround color (green) to remain sticky (fixed green) until another mouse click occurs to select a different element tag
3. At the point the newly hovered upon and selected tag’s backround turns from white to green and remains as such.

In other words what I would like to implement is the following behavior:
1. On hover change font size/color and change back round color
2. On selection keep the alternative backround color activated (remain sticky) until another click occurs a different element tag of the fullwidth menu
_____________________
Still in the effort to make the request more clear I here attach a link to my WIP staging web site.
As you can se on every page there is a fullwidth sub menu. (that remains sticky to the top)
The current situation is:
(font color is black backround color is white)
on hover (font color turns green backround remains white)
on click (the link is followed the font color turns back to black the backround color turns back to white)

What I would like to implement is:
1. font color is black backround color is white)
2. on hover (font color turns white backround turns green)
3. on click (the link is followed, font color REMAINS sticky white, backround REMAINS sticky green)
4. on a new click on a full width sub menu tab point 3 is replayed

Of course status 3 is applied also if the selection comes directly from the menu list.

In other words I want the user to easly visualy grasp understanding on what section of the page he is currently navigating in because of the sticky memory of the alternate color change

PS I have found a similar functiontiy in the Tabs Element ( It is very esay for the user to understand which tab he is looking at because it remains selected and highlighted.)

Sent link to my web site on private content

Thank you very much in advance
Regards
Roberto Pane

May 31, 2020 at 2:49 am #1218107
Mike
Moderator
Hi,
Sorry for the late reply and thanks for the login, Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:
```
#av-custom-submenu-1 li:hover,#av-custom-submenu-1 li:hover > a {
	background-color: #008000;
	color: #fff !important;
}
#av-custom-submenu-1 li.clicked,#av-custom-submenu-1 li.clicked > a {
	background-color: #008000;
	color: #fff !important;
}
```
Then add this code to the end of your functions.php file in Appearance > Editor:
```
function custom_script(){
  ?>
  <script>
(function($){
$(document).ready(function() {
    $("#av-custom-submenu-1 li").click(function() {
        $("#av-custom-submenu-1 li").not(this).removeClass('clicked');
        $(this).addClass('clicked');
    });
});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'custom_script');
```
Then clear your browser cache and check.

Best regards,
Mike
June 2, 2020 at 7:31 pm #1218841

robertopane
Participant

Hello Mike

Works fine !! Thank you Nice feature may I suggest you add it to the Enfold Theme :-)

Best Regards

Roberto

June 7, 2020 at 1:57 am #1220090

Mike
Moderator

Hi,
Glad we were able to help, this customization is too specific to be effective as a general option, but I see that you are using a child theme so this customization will remain in effect after your future updates. We will close this now. Thank you for using Enfold.

For your information, you can take a look at Enfold documentation here
For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

Best regards,
Mike
Author

Posts

Viewing 12 posts - 1 through 12 (of 12 total)

The topic ‘Styling a Fullwidth Sub Menu’ is closed to new replies.