Responsive Header Menu Help

kylebrownlee · November 2016

Hi. I have my website looking the way I want it on desktop, but for some reason, it is not reflected the way it should in the mobile responsive version. I have attached the desktop image to this post, along with the "before" (what the mobile currently is), and a mock-up of "after" which is what I am looking to accomplish. How do I go about fixing this? Please assist! Thank you. URL for development site is http://soundblindstudios.com/hmpdev

Before:

After:

Desktop version:

kylebrownlee · December 2016

Bump again, please acknowledge this request instead of deleting the comment like previously.

Albert · December 2016

Hi,

the only difference we can see between your site and After screenshot, is the right top bar. To move the details from right top bar to the right on mobile, please use:

.mobile-tb-left #Top_bar .top_bar_right .top_bar_right_wrapper { float: right !important; }

P.S. We didn't removed any comment. You must be using prohibited tabs and this is the reason why some comments are being removed automatically.

kylebrownlee · December 2016

Thanks for your reponse.

I fixed it with this instead:

@media only screen and (max-device-width: 480px) {

.mobile-tb-left #Top_bar .top_bar_right { float: left; position: relative; left: 50%; padding: 3px 0px 5px 0px; }

.mobile-tb-left #Top_bar .top_bar_right_wrapper { float: left; position: relative; left: -54%; }

}

Responsive Header Menu Help

Comments