Specific Menu and logo position
Hi,
I have a client that want a very specific menu and logo position, i spent a lot of time trying to make it look like he wants but it didn't work, I managed to make it look as he wanted only when you view the website in desktop, but in smaller screens it looks ugly (menu items in front of logo, on Mac the menu is hidden to left....)
My client's website that i'm working on : https://www.adstudio-paris.com/home/
Or screenshot here : https://www.dropbox.com/s/ystu5h2y2mg6uaw/Screen Shot 2015-10-10 at 10.17.19.png?dl=0
Screenshots of what i did so far using these custom CSS tweaks:
screenshot dropbox url : https://www.dropbox.com/s/94kimgi14fu2udk/final menu.png?dl=0
#Header_creative #Top_bar .menu > li > a span { border-right: 0; border-bottom-width: 0px; line-height: 16px; }
#Header_creative #Top_bar .logo { float: right; text-align: justify; margin: 50px 0; }
#Top_bar .menu > li { margin: 0; z-index: 203; display: inline-flex; float: left; }#Top_bar .menu > li > a span:not(.description) { display: block; line-height: 60px; padding: 0 170px; white-space: nowrap; border-right-width: 1px; border-style: solid; }
#Header_creative { position: fixed; width: 250px; height: 100%; left: -200px; top: 0; z-index: 1001; -webkit-box-shadow: 2px 0 4px 2px rgba(0,0,0,.15); box-shadow: 0px 0 0px 0px; }
#Header_creative #Top_bar .top_bar_left { width: 114% !important; float: none; }
But it looks weird and ugly in responsive devices
screenshots urls :
Please advise,
Thank you
Comments
the websites you sent links above, are not responsive. But our theme is responsive and under responsive mode it won't be possible to get the same menu as you did on desktop. What you can do is deactivate responsive mode and use the same version on mobiles like on desktops. You can disable responsive under Theme options > Responsive section.
Thanks!