Center menu title

Brenbrinkman · July 2018

how do I center these menu titles? : [Links visible only for registered users]

I am using layout style transparant

Thank you!

Bryan · July 2018

Hi,
Please always attach a link so we can check it out. If the page is offline(localhost) then our help will be limited, you will have to contact us when the page is online. Also please make sure that the page is not under maintenance before you provide us the link.
It is always a good idea to also attach a screenshot, for that use services like snag.gy or pasteboard.co
thanks

Brenbrinkman · July 2018

I have made my site online so you could check : [Links visible only for registered users]

I tried css to center met menu titles but it just didn't work.

Pablo · July 2018

You can use a header layout named "Stack:Center" and then just upload a 1x1px transparent logo or just make it disappear by display:none with Custom CSS.

Cheers.

Brenbrinkman · July 2018

Hi Pablo,

That is not the solution, When I do this the background will go beneath the header. The goal is that the background will be behind the header.

Is there an other way to center the menu titles using layout style transparant?

Thank you!

Pablo · July 2018

It's ok, background will go beneath the header, but we'll customize it with Custom CSS to make it transparent.

Leave it as I told you and I'll create Custom CSS for you.

Cheers.

Brenbrinkman · July 2018

Hi Pablo,

I changed the header style to ''stack: Center:. And uploaded a 1px by 1px transparent png. but the logo space won't disappear. So could you also please give me code for that too?

1. Code to place the background behind the header and make the header transparent
2. Remove the upper space above the header.

Thank you!

Website : [Links visible only for registered users]

Pablo · July 2018

Sorry, It's too many CSS to make it work.

Please make it transparent again, it'll be easier.

My bad, sorry again.

Cheers.

Brenbrinkman · July 2018

okay no problem. I changed it back now. Can you solve the problem now?

Thank you!

Pablo · July 2018

Hi,

There's a code only for desktop devices

@media (min-width:767px){
	.top_bar_left{
		width:500px !important;
		position:absolute !important;
		left:0 !important;
		right:0 !important;
		margin:0 auto !important;
		top:-175px !important;
	}
}

Thanks

Brenbrinkman · July 2018

Thanks for the code.

I really appreciate the code. But it is important for me that the website also is mobile responsive. Is there an alternative to still go through the menu on mobile devices, and get rid of the white bar on the top? ( for example an hamburger menu : http://www.screencast.com/t/aMhxGs6Hq [Links visible only for registered users]

Thank you.

Pablo · July 2018

Hi,

Even without my code there was no menu.

I had to code this code to make menu appear, it's broken.

[Links visible only for registered users]

But, I noticed very weird code

[Links visible only for registered users]

If you will delete this, everything works fine.

Thanks.

Brenbrinkman · July 2018

It worked Pablo Thanks!

Sorry for all the questions but I still have a problem haha.

There is an white bar at the top of the website. Which makes the hamburger menu invisible and makes the homepage look weird: [Links visible only for registered users]

This is what I am trying to achieve : [Links visible only for registered users]

I tried to code the things. But whatever I try, I just can't achieve it.

Website : [Links visible only for registered users]

Pablo · July 2018

You still didn't delete it.

Before deleting:[Links visible only for registered users]

After: [Links visible only for registered users]

Then, add this code to make it transparent:

@media (max-width:767px){
	#mfn-rev-slider{
		margin-top:-100px;
	}
	
	#Top_bar .top_bar_left{
	background:white !important;
	margin-top:0px;
	position:absolute;
}
	
	.responsive-menu-toggle i{
		color:white;
	}
}

Thanks.

Brenbrinkman · July 2018

Thanks for the code. When I use this code nothing works through the menu except the homepage.
When I don't use the code. Everything works and looks good except for the homepage.

Could you take another look at it?

Thanks!

Pablo · July 2018

It is working good.

[Links visible only for registered users]

I can click everything and it's redirecting.

But it's only visible for mobile, you have to increase the max-width to tablet size to have it on all resolutions

Thanks.

Brenbrinkman · July 2018

Hi Pablo it is not working fine.

The homepage is looking perfect, but when When I click on a page. It is redirecting, but I can't switch menu's then and there is a big white gap : [Links visible only for registered users][Links visible only for registered users]

Please take a closer look.

Regards, Bren.

Pablo · July 2018

Even after disabling my CSS this website have this big white gap.

[Links visible only for registered users]

Make it from beginning or declare body.page-id-84 before all the CSS's

example: body.page-id-84 .top_bar_left

Do it for every code i sent you.

Cheers

Brenbrinkman · July 2018

Hi Pablo,

I tried everything but it just didn't work out, I didn't understand your last anwser, sorry.

I made an alternative, but it still has its problems I would like some help with.

1. I fixed the header for the mobile. The only problem is that the logo of the mobile header, also shows on the desktop version : [Links visible only for registered users]

How do I delete the logo only for desktop version? (that it would still be visible on mobile)

2. Is it possible to center the menu title?

Thank you.

[Links visible only for registered users]

Pablo · July 2018

1) Use this CSS to make it hapen

@media (min-width:1240px){
#Top_bar #logo img{
		display:none !important;
	}
}

2) Menu title, what do you mean?

Please show me it on screenshot.

Thanks.

Brenbrinkman · July 2018

the menu header titles are now positioned to the left : [Links visible only for registered users]

Could they be centered positioned?

Pablo · July 2018

Will this be okay?

@media (min-width:1240px){
#Top_bar{
	width:50% !important;
  left:5% !important;
	right:0 !important;
	margin:0 auto !important;
}
}

Thanks

Center menu title

Comments

This website uses cookies