Move header and mobile logo to the left. Submenu field longer.

edited February 2016 in Theme support
Hi There, 

I'd like to have the mobile logo aligned to the left, not centered. 
And also I'd like to have the  header logo left aligned at the same distance that the boxed line.
----
Another thing I need to do is make longer the submenu field to be able to put longer titlle submenus

This is the url: http://freezoneconsulting.com/

Thanks in advance!

Comments

  • Hi,

    please show us on screenshot/s what exactly you want to achieve and only then we would be able to tell you if it's possible or not.
  • 1. To align logo to the left on mobile, you need to use the following css:
    @media only screen and (max-width: 767px) {
        #Top_bar .logo #logo { text-align: left !important; margin: 0 !important; }
    }
    2. To increase sub-menu width, please use:
    #Top_bar .menu li ul li { width: 250px !important; }
  • That worked perfect! Thanks!

    I would just know how to move to the left the logo in desktop view.

    Thanks!
  • But the logo is already on the left side.
  • edited February 2016
    Yes you are right, sorry. 

    1. About the font size in submenu items, I would like to get the same size that in main menu that is 14
    I can't find the way through the general options, I need to use css here? what would it be?

    2. I need to remove the fade effect and background colour change in submenu items.

    3. And also is possible to get the burguer menu in mobile menu bigger?

    Thanks in advance
  • 1. To do this, you need to use extra css:
    #Top_bar .menu li ul li a { font-size: 14px !important; }
    2. You can do this with below css:
    #Top_bar .menu > li ul {
        background-color: #ff0000;
    }

    #Top_bar .menu > li ul li a:hover, #Top_bar .menu > li ul li.hover > a {
        background: none;
    }
    3. This can be done with the following css:
    #Top_bar a.responsive-menu-toggle { font-size: 40px !important; }
  • edited February 2016
    2. This worked, but I need take off the effect for underline below items menus in hover

    3. It's not working on my side, I put the next code and still the same size, Before a I put a text and this worked, but I want the burguer menu icon bigger.

    #Top_bar a.responsive-menu-toggle {
    font-size: 60px !important; 
    }

    4. When I see the page on ipad, I can see the menu is going centered, I need to keep it like in desktop, please.


    You earned 5 stars for sure!
    Thanks!
  • 2. To remove this underline, you need to use the following css:
    #Top_bar .menu > li a::after { background: none !important; }
    3. Please use the following css instead then:
    #Top_bar a.responsive-menu-toggle i { font-size: 40px !important; }
    4. This is how it works and this behave can not be changed unfortunately.
  • 2. I just need to remove the fade effect on the underline, I want to use the underline without effect.

    Thanks
  • 2. We are not sure if you mean transition or what exactly but please try to use the following css:
    #Top_bar .menu > li > a, #Top_bar .menu > li > a::after { transition: none !important; }
Sign In or Register to comment.