White Space Between Header Image and Navigation Bar

**ultravista** · 07-27-2018, 09:02 AM

Recently, there has appeared an uninvited white/horizontal space between my blog's header image and the navigation bar: https://ultravista.altervista.org/wp...ader-menu1.jpg

This mobile view may shed more light to it: https://ultravista.altervista.org/wp...er-menu3-1.jpg
Is it because the menus are duplicate? If so, "how can I remove" the useless one in the white space that "doesn't even open" (I use Max Mega Menu)?

Now, look at a shot of the default theme where the image and the bar are perfectly touching. My blog used to be like this and I want to revert to it: https://ultravista.altervista.org/wp...ader-menu2.png

**alemoppo** · 07-27-2018, 10:00 PM

Hi, you can manage menus from Appearance->Menus: why you're using a plugin for that?
You have inserted a broken html code in the page: the code with <title> tag break the toolbar.

Bye!

**ultravista** · 07-28-2018, 02:59 PM

Thank you.

AFAIK, there are two groups of <title> tags in my blog: 1- the one that contains the blog Site title and Tagline which I didn't add but just filled in via the CMS (Appearance-> Header...) years ago and doesn't have anything to do with the above issue since the issue has appeared recently. 2- The ones I recently added to every Custom HTML widget I've created.

After I read your reply, the first thing I did was to remove all these <title> elements from my Custom HTML widget codes, but nothing happened. So, I'm not sure which <title> tag you mean.

The same goes with the menu plugin. I've had it for several years.

BTW, the altervista bar has been displaced during my recent changes too:
https://ultravista.altervista.org/wp...-displaced.jpg

**alemoppo** · 07-29-2018, 09:34 AM

The html pages must have only one tag <title>, <body> <head> ... (see here or here).

Your custom code Your code redefines these tags.
If you really want to insert that code, you should edit it by moving the CSS part in the appropriate section (Appearance->custom CSS), so paste

Code:

@import url(https://www.w3schools.com/w3css/4/w3.css);

.

Then change your html code in:

HTML Code:

<div class="w3-container">
<div class="w3-bar-block" style="width:100%">
<a href="http://ow.ly/i0uO30l6r5G" class="w3-bar-item w3-right-align w3-hover-purple">مشاوره آیلتس و تافل</a>
<a href="http://ow.ly/wcxo30l6qXN" class="w3-bar-item w3-right-align w3-hover-indigo">ترجمه فارسی به انگلیسی</a>
<a href="http://ow.ly/tiVF30l6r9g" class="w3-bar-item w3-right-align w3-hover-blue">طراحی وب*سایت انگلیسی</a>
	<a href="http://ow.ly/V0wA30l6raj" class="w3-bar-item w3-right-align w3-hover-green">راهنمایی در تسلط بر کتاب ۵۰۴</a>
</div>
</div>

Anyway, for your initial problem (for white space) you could solve by adding below the following CSS code (Appearance-> custom CSS):

Code:

.header-image{
margin-bottom: 0px;
}

Bye!

**ultravista** · 07-29-2018, 06:27 PM

Thank you alemoppo for the kind considerations.

1- altervista toolbar: I removed all the redundant tags that needed to be unique, and pointed to the style sheet from the "Add custom CSS." As a result, this issue has been resolved.

2- white space between header image and the menu bar: But the suggestion about zero margin in "Add custom CSS" didn't solve it. I think that the extra menu in the white space is the culprit. If you think my guess is correct, could you tell me how I can remove this duplicate menu?

**alemoppo** · 07-30-2018, 08:58 AM

I don't see the zero margin code. Can you add it to see if works please?

The problem of the duplicate menu can be given by the plugin you used (Max Mega Menu). Can you try temporarily to disable it? (why don't you use the default one?)

Bye!

Thread: White Space Between Header Image and Navigation Bar

LinkBack

Thread Tools

Display

White Space Between Header Image and Navigation Bar

Posting Permissions