[Resolved] Sub menu in Bold theme

Home Forums Support Sub menu in Bold theme

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #1196639
    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

    Best wishes.
    From Balaguer, near of Barcelona

    #1196643
    David
    Staff
    Customer Support

    Hi there,

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

    #1197053
    rafel jesus

    Hi David.
    Perfect it’s working
    Thanks

    Best wishes.
    From Balaguer, near of Barcelona

    #1197074
    rafel jesus

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

    Thanks

    Best wishes.
    From Balaguer, near of Barcelona

    #1197234
    David
    Staff
    Customer Support

    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.

    #1199697
    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

    Best wishes.
    From Balaguer, near of Barcelona

    #1199741
    David
    Staff
    Customer Support

    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.

    #1199805
    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.

    Best wishes.
    From Balaguer, near of Barcelona

    #1199916
    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 */
    .

    Best wishes.
    From Balaguer, near of Barcelona

    #1200206
    David
    Staff
    Customer Support

    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.

    #1200229
    rafel jesus

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

    Best wishes.
    From Balaguer, near of Barcelona

    #1200231
    David
    Staff
    Customer Support

    Let us know how you get on 🙂

    #1207049
    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.

    Best wishes.
    From Balaguer, near of Barcelona

    #1207242
    David
    Staff
    Customer Support

    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.

    #1207512
    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

    Best wishes.
    From Balaguer, near of Barcelona

Viewing 15 posts - 1 through 15 (of 18 total)
  • You must be logged in to reply to this topic.