[Resolved] silverstone – 2 diferent aligns in the MENU

Home Forums Support silverstone – 2 diferent aligns in the MENU

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1250580
    Robert

    Hi

    howa are You?

    I wanna ask about:
    how can i split the MENU on:
    http://www.stalmachopole.com.pl/
    too the left and right ?

    1. RIGHT MENU
    now there are: Tshirts, Hoodies, ect. and this is OK

    2. LEFT MENU
    – i would be perfect if the “CONTACT” would be max. on the left, below the LOGO
    I did add into the MENU-CSS class: menu-item-float-left
    but it didnt helps…

    Last thing:
    where can i 100% remowe from the HEADER the search field between the LOGO and NASZE PRODUKTY?

    Kr
    Robert

    #1250935
    David
    Staff
    Customer Support

    Hi there,

    very well thank you 🙂

    1. In Customizer > Layout > Primary Navigation can you mane sure Navigaton Width and Inner Navigation Width are set to Full Width.

    Then add this CSS:

    @media (min-width: 769px) {
        .main-navigation ul {
            display: flex;
        }
    
        .main-navigation .menu>li:first-child {
            margin-right: auto;
        }
    }

    2. Look for a remove the Hook Element called Woo Search in Dashboard > Appearance > Elements

    #1251027
    Robert

    Hi

    Ad. 2
    – it wokrs 🙂

    Ad. 1.
    – it works too 🙂

    For the future:
    – what kind of code I need to use to move for example the first 4th elements from the MENU to the left?

    Thx
    Robert

    #1251254
    David
    Staff
    Customer Support

    the :nth-child(#) pseudo selector will help. For example using the above code:

    @media (min-width: 769px) {
        .main-navigation ul {
            display: flex;
        }
    
        .main-navigation .menu>li:nth-child(2) {
            margin-right: auto;
        }
    }

    This will push the first and second menu items to the left of the navigation.
    If you wanted to move one, two, three and four then this line:

    .main-navigation .menu>li:nth-child(2) {

    becomes:

    .main-navigation .menu>li:nth-child(4) {

    #1251505
    Robert

    Hi

    yep – it helps.

    One thing more:
    thx TXT in the header “Nasze produkty:” is now on tle left – even I changed it in the settings
    to the right. Do I need anain a new CSS code?
    And its passible to switch OFF the this TXT on the mobile devices?

    Kr
    Robert

    #1252325
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Try this CSS:

    .header-widget {
        margin-left: auto;
    }
    
    @media (max-width: 768px) {
        .header-widget {
            display: none;
        }
    }
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.