[Resolved] Sub menu in Bold theme

[rafel jesus]

Hi there.
I have a problem with the submenu in the bold theme
You can see as I have in my project.

And this is how I would like to have.

How can I do the correct submenu?
The main page is built with Elementor but in Elementor I don’t change the menu and in the main setting, I can’t find as I can resolve the issue.
Thanks

[David]

Hi there,

in Customizer > Layout > Header – Enable Navigation as Header.

[rafel jesus]

Hi David.
Perfect it’s working
Thanks

[rafel jesus]

Hi there.
One question, Why in the link address I can watch bold??

Thanks

[David]

That would mean each of those Pages have a Parent Page.
If you edit the Page in the normal editor, there is a meta box called Parent Attributes – you need to remove the Parent page listed below.

[rafel jesus]

Hi David.
Perfect it works.
But In the other menu, I can’t see the same style I have that in the first menu.

And in this menu when I click in the title the hover colour is black, Can I change it?

And I put another menu, Equips, but this menu I can see like the oter menu.

How I can resolve that?
Thanks

[David]

You can change the menu item colors in Customizer > Colors > Primary Navigation.

The Equips menu – what is the problem here ? The styles look the same to me.

[rafel jesus]

Hi David.
I like the style of menu ”serveis” inside this menu have different pages ” laboral, gestoria, etc…”, the title of every page is white and when you pas with the mouse over every submenu the color is black, how can I change We secondary color? And in Colors > Primary Navigation the black color doesn’t appear.

And the second question is, in the other menu “equips” inside this menu are differents pages too, but when I open this menu is in vertical and I would like to have in horizontal same the first menu.

I don’t know if I explain.
Thanks for your time and patience.

[rafel jesus]

Hi David
And in this theme there’s this ccs code.

/* GeneratePress Site CSS */ /* Typography styling */

/* Text highlighter on Underline Text Decoration on Elementor Headings and anchor links */
u {
    text-decoration: none;
    position: relative;
    z-index: 2;
    font-style: italic;
}

u:before {
    position: absolute;
    content: '';
    bottom: 5px;
    left: 0;
    width: 100%;
    height: 12px;
    background-color: rgba(0, 158, 226, 0.3);
    z-index: -1;
}

.text-highlighter .elementor-heading-title,
a.text-highlighter {
    display: inline;
    background-color: #22222f;
    color: #fff;
    padding: 0.2em 0.5em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

/*--- WP Show Posts ---*/

a.wp-show-posts-read-more,
a.wp-show-posts-read-more:hover {
    padding: 0;
    border: 0;
}

/*--- Primary Navigation - Mega Menu ---*/

@media (min-width: 769px) {
    nav .main-nav .mega-menu {
        position: static;
    }

    /*	nav .main-nav, .inside-navigation {
		position: static;
	}*/
    nav .main-nav .mega-menu>ul {
        position: absolute;
        width: 100%;
        left: 0 !important;
        padding: 20px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    nav .main-nav .mega-menu>ul>li>a {
        font-weight: bold;
    }

    nav .main-nav .mega-menu>ul>li {
        display: inline-block;
        width: 25%;
        vertical-align: top;
        border-right: 1px solid;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    nav .main-nav .mega-menu>ul>li:last-child {
        border-right: 0;
    }

    nav .main-nav .mega-menu.mega-menu-col-2>ul>li {
        width: 50%;
    }

    nav .main-nav .mega-menu.mega-menu-col-3>ul>li {
        width: 33.3333%;
    }

    nav .main-nav .mega-menu.mega-menu-col-5>ul>li {
        width: 20%;
    }

    nav .main-nav .mega-menu>ul>li:hover>a,
    nav .main-nav .mega-menu>ul>li:focus>a,
    nav .main-nav .mega-menu>ul>li[class*="current-"]>a,
    nav .main-nav .mega-menu ul ul {
        background-color: transparent !important;
        color: inherit;
    }

    nav .main-nav .mega-menu ul .sub-menu {
        position: static;
        display: block;
        opacity: 1;
        visibility: visible;
        width: 100%;
        -webkit-box-shadow: 0 0 0;
        box-shadow: 0 0 0;
        left: 0;
        height: auto;
    }

    nav .main-nav .mega-menu ul.toggled-on .sub-menu {
        pointer-events: auto;
    }

    nav .main-nav .mega-menu .sub-menu .menu-item-has-children .dropdown-menu-toggle {
        display: none;
    }

    .header-wrap+#page {
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
        -webkit-backface-visibility: hidden;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);

    }
}

/*--- Blog Page ---*/

/* Custom Blog Hero */
.custom-blog-hero {
    background-color: #009ee2;
    /* Change background color */
    position: relative;
    margin-bottom: 150px;
    padding: 0 20px;
}

.custom-blog-hero-image {
    mix-blend-mode: luminosity;
    -webkit-filter: grayscale(100%);
    filter: greyscale:;
    opacity: 0.2;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center
}

.custom-blog-hero .grid-container {
    padding-top: 300px;
    padding-bottom: 150px;
    color: #ffffff;
    /* Change text color */
    z-index: 1;
    position: relative;
    opacity: 1 !important;
}

/* Set H2 size and font on entry title on archives */

.generate-columns h2 {
    font-family: inherit;
    font-size: 24px;
    font-weight: 500;
}

/*-- Single Post --*/

/* Author Box  */

.author-box {
    font-size: 0.8em;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-bottom: 60px;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
}

.author-box .avatar {
    width: 50px;
    margin-right: 20px;
}

h5.author-title {
    margin-bottom: 0.5em;
}

/* Single Post Custom hero */

.hero-grid {
    padding: 0;
}

.hero-column:nth-child(1) {
    padding: 20px;
}

@media (min-width: 769px) {
    .hero-grid {
        display: grid;
        grid-template-columns: 29% 21% 50%;
        padding: 0;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .hero-grid:before {
        display: none;
    }

    .hero-column:nth-child(1) {
        grid-column: 1 / 3;
        grid-row: 1;
        padding: 30px;
        background-color: #009ee2;
        color: #fff;
    }

    .hero-column:nth-child(2) {
        grid-column: 2 / -1;
        grid-row: 1;
        z-index: -1;
    }

    .custom-hero {
        padding-top: 30px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
}

/*--- Elementor Custom styling */

/* Remove Shadow from buttons when not hovered */

.no-hover-shadow .elementor-button:not(:hover) {
    -webkit-box-shadow: 0px 7px 10px -6px rgba(0, 0, 0, 0) !important;
    box-shadow: 0px 7px 10px -6px rgba(0, 0, 0, 0) !important;
}

/* Reduce distance of FadeInUp and SlideIn Up Animations in Elementor */

@-webkit-keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 30%, 0);
        transform: translate3d(0, 30%, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@-webkit-keyframes slideInUp {
    from {
        -webkit-transform: translate3d(0, 80%, 0);
        transform: translate3d(0, 80%, 0);
        visibility: visible
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

/* Style Click Box custom element for desktop */

@media (min-width: 769px) {
    .click-box {
        position: relative;
    }

    body:not(.elementor-editor-active) .click-box .elementor-widget-button {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    body:not(.elementor-editor-active) .click-box .elementor-widget-button>.elementor-widget-container,
    body:not(.elementor-editor-active) .click-box .elementor-widget-button>.elementor-widget-container>.elementor-button-wrapper,
    body:not(.elementor-editor-active) .click-box .elementor-widget-button>.elementor-widget-container>.elementor-button-wrapper>.elementor-button {
        width: 100%;
        height: 100%;
        color: transparent;
        border: 0;
        background-color: transparent;
    }

    .click-box:hover .elementor-widget-text-editor,
    .click-box:hover .elementor-widget-heading {
        color: #fff;
    }

    body:not(.elementor-editor-active) .click-box-image:not(:hover) .elementor-widget-container {
        opacity: 0;
    }
}

/* Overflow hidden class on columns to stop animations outside of element - optional */

.overflow-hidden {
    overflow: hidden;
}

 /* End GeneratePress Site CSS */
.

[David]

The Bold Site uses this simple mega menu:

https://docs.generatepress.com/article/building-simple-mega-menu/

The CSS is already added to the Site. So follow the steps in the article after the CSS to add it to your other menus.

The colors are controlled in Customizer > Colors > Primary Navigation –> Sub Menu colors.

[rafel jesus]

Hi David.
Ok, I am going to look at this information and do it.
Thanks, stay in touch.

[David]

Let us know how you get on 🙂

[rafel jesus]

Hi David.
I resolve the submenu design, but not the submenu title in hover link, I check al CSS code but I don’t find any reference to submenu title hover colour, the first link-colour is white but hoover-link the colour is black, how can I change the hoover colour?
Thanks for your time.

[David]

The colors are controlled in Customizer > Colors > Primary Navigation –> Sub Menu colors.
Can you disable your cache, and then make those changes.

If it doesn’t work leave the cache disabled and let me know.

[rafel jesus]

Hi David.
I know how customizer colours, but in Customizer > Colors > Primary Navigation –> Sub Menu colours. I didn’t change the hover colour in the customizer.
You’re able to see the picture.
tay in
Stay in touch.
Thanks

[Author]

Posts