Menu with

  • Resolved pertlpetra

    (@pertlpetra)


    4 years, 10 months ago

    Hey,

    I would like to make the top menu wider. As you can see, the Insta icon is in the 2nd row. And in the future I am planning to make more menu items. Could you please help me with this issue?

    Thank you very much in advance!

    BR:

    Petra

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)

  • Hello Petra, try to use the following CSS code.

    You can add CSS code in Customize → Additional CSS section.

    @media (min-width: 1200px) {
    #masthead .site-branding {
        flex-basis: 20%;
    }

    #masthead #site-navigation {
        flex-basis: 80%;
    }

    ul.header-search-cart {
        margin-left: 20px;
    }

    #masthead #site-navigation ul.menu > li:first-child {
        padding-left: 0;
    }

    #masthead #site-navigation ul.menu > li:last-child {
        padding-right: 0;
    }

    .main-navigation li {
        padding: 0 10px;
    }
}

    Please feel free to ask any other questions that you might have.

    Kind Regards, Roman.

    Thread Starter pertlpetra

    (@pertlpetra)

    Hey Roman,

    thank you for the rush answer. I added the code in the additional css section, but the top navigation is still divided into 2 rows. Can you please check it?

    Big thanks!

    Petra

    You don’t have a closing curly brace here on the fourth line:

    /* Hover links */
a:hover {
    color: #be6875;
	
@media (min-width: 1200px) {
    #masthead .site-branding {
        flex-basis: 20%;
    }

    #masthead #site-navigation {
        flex-basis: 80%;
    }

    ul.header-search-cart {
        margin-left: 20px;
    }

    #masthead #site-navigation ul.menu > li:first-child {
        padding-left: 0;
    }

    #masthead #site-navigation ul.menu > li:last-child {
        padding-right: 0;
    }

    .main-navigation li {
        padding: 0 10px;
    }
}

    Try to add it like this:

    /* Hover links */
a:hover {
    color: #be6875;
}
	
@media (min-width: 1200px) {
    #masthead .site-branding {
        flex-basis: 20%;
    }

    #masthead #site-navigation {
        flex-basis: 80%;
    }

    ul.header-search-cart {
        margin-left: 20px;
    }

    #masthead #site-navigation ul.menu > li:first-child {
        padding-left: 0;
    }

    #masthead #site-navigation ul.menu > li:last-child {
        padding-right: 0;
    }

    .main-navigation li {
        padding: 0 10px;
    }
}

    Kind Regards, Roman.

    Thread Starter pertlpetra

    (@pertlpetra)

    Oh, thank you very much for your support!! Have a nice day!

    You are welcome!

    And have a nice day as well ??

    Kind Regards, Roman.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Menu with’ is closed to new replies.