Grow your CSS skills. Land your dream job.

Menubar is not working after changing logo position

  • # March 12, 2013 at 10:31 am

    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?

    # March 12, 2013 at 11:13 am

    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?

    # March 12, 2013 at 11:49 am

    I didn’t change anything except CSS .

    here is the link of my working site http://aniyanetworks.net/Blog/

    # March 12, 2013 at 1:28 pm

    Works just fine for me on Firefox and Chrome.

    # March 12, 2013 at 2:30 pm

    @Merri: really ! I am using chrome , but menubar isn’t working . Not only the drop down but the whole menubar

    # March 12, 2013 at 2:33 pm

    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).

    # March 12, 2013 at 3:09 pm

    I tried , by making menubar position relative , but didn’t work :(

    # March 12, 2013 at 3:12 pm

    Can anyone solve this ? I am really in trouble

    # March 12, 2013 at 4:10 pm

    This isn’t a change you can accomplish with just CSS. You’ll have to restructure your header.php file as well.

    # March 12, 2013 at 4:47 pm

    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.

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".