advent12 on "[Theme: Superhero] Nav Menu and Logo same Line?"

Hello there,

I am trying out this theme.

I wondered if it was possible to have the logo and nav menu on the same line.

I had 7 items side by side and took 2 away. I still had to code to get the menu to stay on one line. But then you see, the logo becomes smallish.

If I code too much, then it doesn't look so well on mobile.

I've used this code to get the menu on one line:
.main-navigation {
width: 60%;
}

#masthead hgroup {
width: 10%;
}

Any help is appreciated. Thanks,

sitewebsite

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?