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

ogsbox · February 2016

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!

Albert · February 2016

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.

ogsbox · February 2016

Hi, I've made 2 screenshots to clarify, take a look:
https://www.dropbox.com/s/2zipnz0b3d545li/Screenshot 2016-02-17 18.03.47.png?dl=0

And this for mobile logo:
https://www.dropbox.com/s/o2auf9bkgl4q74o/Screenshot 2016-02-17 18.06.03.png?dl=0

Albert · February 2016

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; }

ogsbox · February 2016

That worked perfect! Thanks!

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

Thanks!

Albert · February 2016

But the logo is already on the left side.

ogsbox · 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

Albert · February 2016

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; }

ogsbox · 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!

Albert · February 2016

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.

ogsbox · February 2016

2. I just need to remove the fade effect on the underline, I want to use the underline without effect.

Thanks

Albert · February 2016

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; }

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

Comments