Seems like you've done something with it, now the page is very broken.
Anyway, biggest problem probably happened because there is div.container within #logo and div.container has 960px width, so when you (I guess) set position: absolute; to #logo it also made #logo to jump on top of the #mainmenu.
Easiest solution would've been to give #mainmenu a position: relative; or remove container class from the div (although that may give some other issues).
1- within your body, add a div of class "container" instead of giving the "container" class inside menu & slider & loop :
2- remove the "container" class within the above mentionned
3- create a element to encompass your logo + menu
4- cleanup: unset margins, width, floats on logo and menu and ul#mainmenu-menu, add theme back one at a time only if needed
5- display:block; your logo
6- float your logo and your menu left
7- remove margin-top: 30px; on the slider ?
Also, try to style using classes and keep ids for javascript.
I am using a free wordpress theme Pitch (http://siteorigin.com/theme/pitch/) . I re positioned the logo and put it in line with menubar .
like this: http://i49.tinypic.com/10xvka0.jpg
But after doing this not only the drop down but the whole menu bar doesn't work at all .
This is my CSS: http://pastebin.com/SeaaGeYA
How can I make the menubar working at same time maintaining my desired layout?
A link to your site, or a Codepen of your html + css would help immensely.
Did you change just the CSS or were you tinkering around with the PHP / HTML as well?
I didn't change anything except CSS .
here is the link of my working site http://aniyanetworks.net/Blog/
Works just fine for me on Firefox and Chrome.
@Merri: really ! I am using chrome , but menubar isn't working . Not only the drop down but the whole menubar
Seems like you've done something with it, now the page is very broken.
Anyway, biggest problem probably happened because there is div.container within #logo and div.container has 960px width, so when you (I guess) set
position: absolute;to #logo it also made #logo to jump on top of the #mainmenu.Easiest solution would've been to give #mainmenu a
position: relative;or remove container class from the div (although that may give some other issues).I tried , by making menubar position relative , but didn't work :(
Can anyone solve this ? I am really in trouble
This isn't a change you can accomplish with just CSS. You'll have to restructure your header.php file as well.
Hey!
Have you tried the following ?
1- within your body, add a div of class "container" instead of giving the "container" class inside menu & slider & loop :
2- remove the "container" class within the above mentionned 3- create a element to encompass your logo + menu 4- cleanup: unset margins, width, floats on logo and menu and ul#mainmenu-menu, add theme back one at a time only if needed 5- display:block; your logo 6- float your logo and your menu left 7- remove margin-top: 30px; on the slider ? Also, try to style using classes and keep ids for javascript.