Black Friday Sale! Get up to $40 off GP Premium!Learn more

[Resolved] How to get horizontal Main and SubMenus and in the centre of the screen?

Home Forums Support How to get horizontal Main and SubMenus and in the centre of the screen?

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #382270
    kaburok

    Hi,
    I was looking for a solution in the whole form, but unfortunately nothing was helping, My css and html programming skills are very low. But even I have the GB-Premium I could not solve the issue.
    Well The inspiration came from Apple Website Mac.com. I would like to have just horzinatl menus and sub menus, this I could arrange, but just for the second menu thanks you css in one of the forums but I would like to
    1- get Second Sub-Menu horizontal as well?
    2- get the Main and all the submenus in full width AND centralized in the Middle of the page!

    See link:

    Hope to get this solved soon.

    The css I have used:
    /*horizontal sub-menu */
    body .sf-menu > li {
    position: static;
    }
    body .main-navigation ul.menu > li > ul {
    width: 100%;
    }
    body .main-navigation ul.menu > li > ul > li {
    width: auto;
    }
    body .main-navigation ul.menu > li > ul > li ul {
    left: 0;
    top: 100%;
    }

    /* enter aligning*/
    .main-navigation ul ul {
    width: 200px;
    text-align: center;
    }

    GP Premium 1.4.3
    #382337
    kaburok

    Ive got an email that Leo has replied but when I open the link I see just my created post with no reply?

    #382399
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Perhaps this will do it:

    .sub-menu li {
        float: none;
        display: inline-block;
    }

    Let me know 🙂

    #382503
    kaburok

    Hi Tom,

    Great, one problem is solved. No the submenu is in the centre of the page.
    But still I need to get the second submenu horizontal and in the centre of the page.

    Thanks in advance 🙂

    #382512
    Leo
    Staff
    Customer Support

    This should take care of both:

    body .sf-menu > li,
    body .sf-menu > li > ul > li{
    	position: static;
    }
    
    body .main-navigation ul.menu > li > ul,
    body .main-navigation ul.menu > li > ul > li > ul {
    	width: 100%;
    }
    
    body .main-navigation ul.menu > li > ul > li,
    body .main-navigation ul.menu > li > ul > li > ul > li {
    	width: auto;
    }
    
    body .main-navigation ul.menu > li > ul > li ul {
    	left: 0;
    	top: 100%;
    }
    .sub-menu li {
        float: none;
        display: inline-block;
    }
    #382519
    kaburok

    Hi,

    Waw it works thanks, but just found out that the submenu categories are not directly aligned under those from the main-manu, it looks like that the main.menu is not really in the centre. Its obviously because of the logo in the navigation task. Plus the search navigation size is full width and cover even the logo by the activation.

    you can see it under the link posted above.
    well, I still need your help.

    thanks

    #382607
    Tom
    Lead Developer
    Lead Developer

    Try adding this CSS:

    @media (min-width: 769px) {
        .navigation-logo {
            position: absolute;
        }
    }
    #382660
    kaburok

    Yes, thanks to you both. Great support! 🙂

    #382803
    Tom
    Lead Developer
    Lead Developer
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.