Logo Size in Navigation Menu

hi.

I have just bought this new theme http://www.mvpthemes.com/flexmag, and when I upload my 265px wide Logo, it doesn’t fit the space correctly and gets resized to 200px wide. How can I make it fit the space with the size of 265px? I’ve tried adjusting the 200px to 250px, but then the logo gets pushed below the menu. I have added a picture and the css code.

Here’s is my nav css code:

#main-nav-wrap {
	float: left;
	position: relative;
	width: 100%;
	height: 50px;
	z-index: 9999;
	}

#main-nav-cont {
	width: 100%;
	}

.nav-logo-out {
	float: right;
	margin-left: -280px;
	width: 100%;
	}

.nav-logo-in {
	margin-left: 280px;
	}

.nav-left-wrap {
	width: 280px;
	}

.nav-logo-fade {
	line-height: 0;
	overflow: hidden;
	padding-right: 0;
	width: 0;
	}

.nav-logo {
	line-height: 0;
	padding-right: 20px;
	width: 200px;
	}

.nav-menu-out {
	float: left;
	margin-right: -123px;
	width: 100%;
	}

.nav-menu-in {
	margin-right: 123px;
	}

nav.main-menu-wrap {
	top: 0;
	width: 100%;
	}

nav.main-menu-wrap ul {
	float: left;
	width: 1000%;
	}

nav.main-menu-wrap ul li {
	float: left;
	position: relative;
	}

nav.main-menu-wrap ul li.mega-dropdown {
	position: static;
	}

nav.main-menu-wrap ul li a {
	float: left;
	font-size: 13px;
	font-weight: 400;
	line-height: 100%;
	opacity: 1;
	padding: 18.5px 14px;
	position: relative;
	text-transform: uppercase;
	}

I have moved you post to the Wordpress forum @creepshowcool as you are more likely to get help there than the general HTML/CSS forum.

Welcome to the forums, @creepshowcool. It’s very hard to see what is causing the problem with just some CSS and an image, because the html structure has a big effect on how the different elements relate to each other. Do you have a link to the live site, or the html code for this page that you could copy and paste here?

Hi, sorry for the delay.

Here’s my link http://www.du-hd.com/

As you can see, the logo doesn’t sit right as the space appears to be smaller than my logo size.

I don’t see the problem.

 

I would like to recommend that you not use such a restrictive meta viewport tag. Use this instead:

<meta name="viewport" content="width=device-width,initial-scale=1.0">

you can clearly see the logo has dropped below the menu, it’s supposed to be in line with the hamburger menu.

Sorry, I misunderstood the problem.

Did you change the viewport tag? You should.

i never touched the code for that, it came as it is with the theme. what will changing that do?

Please read this…

Why is this Code Important in a Webpage? What's the purpose? - #2 by PaulOB

hi. where do i put that code?

The HTML validator gives a clue. Look at the first warning. It mentions line 5 and shows you the code that is presently found. That code needs to be edited to match the preferred viewport values or replaced with the preferred viewport line.

https://validator.w3.org/nu/?doc=http%3A%2F%2Fwww.du-hd.com%2F

You should also attend to the errors that follow the warning. While HTML 5 permits CSS style tags within the <body> section of the page, it is NOT good practice to put them there. They should be placed within the <head> section. Those styles, no matter where they are placed, will act on ALL of the HTML, not just the HTML that follows them. Scattering CSS style tags within the body section invites errors.

Unfortunately, I’ve found that some WordPress plugins will place their CSS within the body tags, which is a real pet peeve of mine. I’m not sure if that is the case here, but if it is, there is little that the OP can do about that.

1 Like

Hi, webmachine,

I don’t believe that the location of the CSS within the body section is causing the problem with the logo. Only that it’s poor practice because it invites errors.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.