Moving the Nav Menu next to Header Image

  • Hi so I’m looking to redesign the header/nav menu on my site and I’m running into some trouble. I’ve looked at a lot of videos and threads but no avail.

    URL: https://thatwasjunk.com
    Theme: Twenty Twelve

    So I’m switching out the current header image to a small circular 245×245 image that will be left-aligned. I want my nav-menu to sit right along side of it, jutting out from the circular logo image. I have all the logos and nav menu images ready to go but I don’t know which code to alter or add to make this happen.

    1. I want to move my nav menu to be directly next to my new logo image.
    2. I want to add a background image to my nav menu.

    Thanks!

Viewing 3 replies - 1 through 3 (of 3 total)

  • You need to add some css to your theme’s style.css file

    Under Appearances in the Dashboard, click Editor, look for style.css on right side.

    .site-header a img {
width: 245px;
margin: 0;
float: left;
}

.main-navigation {
float:left;
}

.nav-menu {
background-image: url('paper.gif');
}

    Obviously change paper.gif to whatever you want.

    Thread Starter kylmorg

    (@kylmorg)

    Wow so this code was almost perfect. I had to change a few things and I’m like an inch from having everything exactly how I want it. So here’s a preview of the changes:

    View post on imgur.com

    So the only thing left that I want to do is move the nav bar up so that it’s sitting directly next to my circular logo. What bit of code do I need to make that final adjustment?

    Also, I had to make one adjustment to the code you provided which is for the .main-navigation portion. Mine now looks like this so I could cater to my specific images:

    main-navigation {
margin-left: 169px;
}

    Hmmm…I think something like

    .site-header a img {
width: 245px;
margin: 0;
float: left;
height:245px;    <--add this
}

    Hard to guess without seeing the site, another thing that might need changing the height the header which contains both .site-header and .main-navigation

    Let me know how you get on.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Moving the Nav Menu next to Header Image’ is closed to new replies.