[Resolved] Need to configure my Nav Menu.

Home Forums Support Need to configure my Nav Menu.

Viewing 15 posts - 1 through 15 (of 19 total)
  • Author
    Posts
  • #1061576
    Jose

    Hi team. I’m going to copypaste the same text that I wrotte in my other post.

    It begins here:

    – Now, I need to make some changes to the main nav menu.

    If you see the image that I’ve attached you, you could see the Nav Menu that I designed.

    My actual menu is really close to the design, but there are 2 things that I couldn’t configure:

    View post on imgur.com

    1) If you see my design, the “active” section has a low bar with a purple color, but in my web need to be configured.

    2) In my web, there is a place in the header that have a purple spot behind the nav menu, but is a dark zone, and “Portfolio” and “Contact” can’t be seen good enough, so, these options would must be “white” as you can see in the link that I provided.

    Okay, this poses a problem for me, because this “changes” are just effective in the front page, in the rest of the web it have a classical menu (with classical I mean that isn’t set with “Elements”).

    And when the web is adaptive for mobiles, the menu is collapsed

    I don’t know if I’m explaining well enough because English is not my mother thonge, but I’ll be nice to repeat if is required.

    PD: The low bar must be configured for all the menus of the whole web.

    #1062076
    Leo
    Staff
    Customer Support

    Hi there,

    Sorry I’m not quite sure if I understand.

    Can you let me know exactly what we are trying to fix and what the desired outcome is?

    Change the navigation colors on the home page?

    #1062090
    Jose

    Hi leo

    What I need is to configure the Nav Menu so that every time you are in a section, a lower bar appears under the “menu option”, that means that if I am on the “Start” page it appears under the Start option of the menu a bottom bar, just as indicated in the image I attached.

    If you see my website, it currently does not have that bar that I tell you when you are on that page.

    In addition, this menu has a visibility problem, and it is that right behind the “Portfolio” and “Contact” options, there is a dark spot that is part of the background, and I need those options to look white. The problem is that when the menu collapses, these options have to be the original color again.

    The second problem is that the menu on the “Start” page has been created with “elements”, because it is transparent, while the rest of the pages are normal menus, and I don’t know if this could lead to some kind of problem.

    To end. What I need for sure is to configure the bottom bar that I mentioned, and if the color is not possible, I will look for an alternative to the menu.

    Thanks for your help.

    This text has been translated with Google Translate.

    #1062162
    Leo
    Staff
    Customer Support

    Are you looking for something like this?
    https://docs.generatepress.com/article/adding-menu-hover-animation/

    As for the colors, you can set navigation colors for that specific header element:
    https://docs.generatepress.com/article/header-element-overview/#site-header
    https://www.screencast.com/t/FPYpo3Zq

    Let me know if this helps 🙂

    #1062402
    Jose

    Yes Leo, that one of the things that I was looking for, I applied, but now I need to change the color to this #8d91e9

    But I still have problems with the Nav. As I said, my menu is splited in 2 sides, with a center logo. The right side must be white, while the left side must keep their colors (Obviously, the low bar must change to white when hover the right side), and I can’t do that changes from “elements”.

    I can see too that the logo is acting as an option of the nav menu, which is normal, but the low bar mustn’t appear when you put the mouse over it.

    #1062564
    Tom
    Lead Developer
    Lead Developer

    To fix the logo getting an underline, try replacing your CSS with this:

    @media (min-width: 769px) {
        .main-navigation .menu > .menu-item:not(.menu-item-separator) > a::after {
            content: "";
            position: absolute;
            right: 0;
            left: 50%;
            bottom: 15px;
            -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    
            display: block;
            width: 0;
            height: 2px;
    
            background-color: currentColor;
            transition: 0.3s width ease;
        }
        .main-navigation .menu > .menu-item.current-menu-item:not(.menu-item-separator) > a::after,
        .main-navigation .menu > .menu-item.current-menu-ancestor:not(.menu-item-separator) > a::after,
        .main-navigation .menu > .menu-item:not(.menu-item-separator) > a:hover::after {
            width: 50%;
        }
    }

    In that CSS, you’ll see currentColor, which sets the underline to the current color of the link. You can change that to any color you like.

    To change the color of the links on one side, you would need to give those menu items a specific class. Something like white-menu-items.

    Then you could do this:

    .main-navigation:not(.toggled) .main-nav ul li.white-menu-items a {
        color: white;
    }

    Of course, this is going to be an issue when you resize your site and the background image changes position. You may need to give the navigation a semi-transparent background so all the menu items can be the same color.

    #1062857
    Jose

    Hi Tom! Thanks for all your help.

    I applied the code that you provide me and it works very well! Even when the menu is collapsed, because the options return to their original color.

    Now, is there a way that when the right side get underlined, the low bar change to white, and when is in the left side, change to #8d91e9?

    That probably will be the last thing that I need to complete the configuration of my Nav Menu.

    Thanks for all guys!

    EDIT: I saw a problem. I had one menu, and when I used the CSS “white-item” as you said, it was acting in the whole web, so, I created another menu that has the same structure, but any of these options are in white.

    How can I apply this manu to the other pages excluding the front page?

    #1063526
    Tom
    Lead Developer
    Lead Developer

    I would set the second color in your normal CSS, then add this:

    .home .main-navigation .menu > .menu-item:not(.menu-item-separator).white-item > a::after {
        background-color: #fff;
    }

    So are you only wanting this two-color CSS to apply on the front page?

    Let me know 🙂

    #1065926
    Jose

    Sorry Tom, but I don’t know what color should I set in my CSS and exactly where. Also, I didn’t apply the code because of what I explained.

    And, answering your question, yes, I just want to apply this configuration on the front page.

    #1066665
    Tom
    Lead Developer
    Lead Developer

    In your main CSS (https://generatepress.com/forums/topic/need-to-configure-my-nav-menu/#post-1062564), set the background-color to #8d91e9.

    Now all of your underlines will have that color.

    Now add the CSS I provided above: https://generatepress.com/forums/topic/need-to-configure-my-nav-menu/#post-1063526

    Your white menu items will now have a white underline.

    I’ve adjusted the CSS above so it only applies on the home page.

    #1066909
    Jose

    I did every step that you said me but it didn’t works and I don’t know why…

    I had set the background color with #8d91e9, so, I just had to insert the new CSS, but it doesn’t look any change.

    #1066935
    Tom
    Lead Developer
    Lead Developer

    I can’t see your CSS, but your white menu items have this class: white-menu-items

    In the CSS I provided above, I used white-item as the class. Did you update that to white-menu-items?

    #1067175
    Jose

    Okay, that was the problem. Thanks Tom!

    Now, if you see my web, you will notice that the right side of the menu nav has change to the original color, and I need that items white too, and just in the front page, as the underline.

    Any idea of how to do it?

    #1067314
    Jeff

    Hey Jose…can I ask you something? How did you put your website logo in the center of the menu bar? I would like to do that but can’t figure out how to do it. Does it require coding? Also, I like your website, did you make that using GP and Elementor?

    #1067345
    David
    Staff
    Customer Support
Viewing 15 posts - 1 through 15 (of 19 total)
  • You must be logged in to reply to this topic.