Nav Menu and Logo same Line?

Hi there,

You could make use of CSS media queries in order to target devices of a certain width. For example, the following would only target devices that are 600px in width or wider:

@media screen and (max-width: 600px) {
    .main-navigation {
        width: 60%;
    }

    #masthead hgroup {
        width: 10%;
    }
}

As an extra note: You should not edit a theme’s style.css directly. Any changes you make there will be lost when it comes time to update your theme.

Instead, to add custom CSS, firstly set up a child theme or activate a standalone CSS plugin. If you have Jetpack installed then you can activate its custom CSS module.

Let me know how you get on with that or if you have any extra questions.

Thanks.

I am able to make the logo larger however the problem is keeping the nav menu from spilling onto the next line while doing so. And…not screwing it up on mobile…as in the logo appears almost off the screen.

Ideally, I’d like the nav black header bar to remain thin (original) enough to hold the menu and logo..I don’t want this to double in size to accommodate a larger logo.

Would padding or margin work?

I came across another solution that would be great, but #access doesn’t seem to work for SUPERHERO. How can I find the correct element to target?

#access {
background: #000;
background-image: url(‘INSERT URL IMAGE’);
background-repeat: no-repeat;
display: block;
float: left;
margin: 0 auto;
width: 940px;
}

example website

example website

My Solution in case anyone else uses this theme.

#masthead-wrap {
background: #000;
background-image: url(‘https://www.url’);
background-repeat: no-repeat;
display: block;
float: left;
margin: 0 auto;
width: 100%;
min-height: 80px;
}

.main-navigation {
width: 80%;
}

#masthead hgroup {
width: 10%;
}

Although..still doesn’t work on mobile. :/

Hi there,

It looks like you’re now using Twenty Fourteen on modernmapledesigns.com. Are you planning to use that theme going forward or are you planning to switch back to Superhero?

If you do switch back to Superhero, please feel free to post back here and I can take another look at your CSS. It sounds like you’d need to make use of media queries to style your menu on mobile.

Thanks!