Docs

[Paul Democritou]

I am trying to add at least two bits of text to my topbar, but it is misaligning the social media widge – see attached screengrab.

I have read this and other similar topics: https://community.theme.co/forums/topic/vertically-align-the-text-search-box-and-the-socila-media-icons-in-the-topbar/

This code hides some of my text but was the only one that meaningfully affected the issue:
.x-topbar-inner > p{
display:block!important;
}
.x-topbar-inner > p.p-info {
display:block!important;
}

Please help,
PD

[Paul Democritou]

Screenshot not uploading. Go here: http://pauldemocritou.com/wp-content/uploads/2016/07/Screen-Shot-2016-07-23-at-2.07.23-PM.png

[Rue Nel]

Hello PD,

Thanks for writing in! Your site is under construction mode. To assist you better with this issue, would you mind providing us the url of your site with login credentials so we can take a closer look? This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

To do this, you can make a post with the following info:
– Link to your site

– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thank you.

[Paul Democritou]

This reply has been marked as private.

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> CSS :

.x-topbar p:empty {
    display: none;
}

Hope that helps.

[Paul Democritou]

Hello,
It didn’t work. The SM icons are still bumped down.

I also need help getting the header (logo and menu) to align with the topbar item with the text “GET MY NEW BOOK” I added
.x-navbar {
padding-left: 20%;
padding-right: 20%;
}
but it changes the alignment awkwardly depending on the screen size.Is there a way to align the blue “PD” with the topbar item?

Thanks,
PD

[Joao]

Hi There,

Change your topbar content for:

<span style="font-size:12px; padding-top:10px; color:black;"><span style="align: center; background: #02aed5; text-align: left; padding:10px; padding-right:8px;">

GET MY NEW BOOK - <a href="http://mcpauld.us6.list-manage.com/subscribe?u=80dc9e6e315f12b067d7e2008&id=5abe508563" style="color:white">JOIN NOW Totally FREE! </a>
</span><span style="align: center; text-align: left; padding:10px; padding-right:8px;"> Sign up for <a href="http://mcpauld.us6.list-manage.com/subscribe?u=80dc9e6e315f12b067d7e2008&id=5abe508563" style="align: right;">Email Alerts</a></span></span>

Remove this code from Appereance Customizer Custom CSS:

 .x-navbar {
    padding-left: 20%;
  padding-right: 20%;
}

If you would like the logo to be inline and align with your navbar items, go to Appereance >Customizer > Header and adjust the top logo alignment.

If you would like your logo to be on top of your menu items and all be center, go to Appereance > Customizer > Header and selected Stacked instead of Inline.

Hope that helps

Joao

[Paul Democritou]

Hello,
Thanks, the code for the topbar worked. However, adjusting the Navbar Top Logo Alignment simply pushed the logo down. I am looking to remove the white space between the logo and the menu, ie the space between the logo “Paul Democritou” and first item on the menu “Home” is way too much. How can I center all of this content (logo and menu)? I have read the following and it didn’t work.
https://community.theme.co/forums/topic/center-logo-and-navbar-text/
https://community.theme.co/forums/topic/nav-bar-menu-alignment-and-resize-issue/
https://www.google.com/url?q=https://community.theme.co/forums/topic/centering-the-navbar/&sa=U&ved=0ahUKEwiHxbb7tJTOAhVl6YMKHUDWABkQFggFMAA&client=internal-uds-cse&usg=AFQjCNFyVlGVF61O7qsg8TYQ7NluOK1XhA
Thanks,
PD

[Joao]

Hi There,

I am sorry but it still not clear what you want to achieve.

If you would like to add the logo on top of the navbar you need to change to stacked,

Beside that you have a lot of parameters to play around in Appereance > Customizer > Header

Playing with the values that will allow you do to most of the adjustments on the logo and navbar areas.

If you cannot achieve wat you want please provide a mockup/ screenshot of what you would like to achieve and we will help you.

Thanks

Joao

[Paul Democritou]

Hello,
I’m aware of the inline vs. stacked option. However, what I want is for the logo to be next to the menu as it is now and for both logo and menu to be centered in the page as it is here: http://www.grantcardone.com/

I have played with all the values, and none other than the aforementioned padding to the CSS affects the horizontal alignment of the items.

screengrab/mockup attached.

Thanks,
PD

[Paul Democritou]

attempting attachment again.

[Lely]

Hi PD,

Thank you for the screenshots. Due to structure and responsiveness, that would need a lot of custom CSS. Please try adding this custom CSS:

.masthead-inline .x-brand {
    left: 12%;
    position: absolute;
}
.masthead-inline nav {
    float: none;
    position: relative;
    left: 37%;
}
@media (min-width:960px) and (max-width:1000px) {
.masthead-inline .x-brand {
    left: 0;
    position: relative;
}
.masthead-inline nav {
    float: none;
    position: relative;
    left: 0%;
}
.x-brand img {
    width: 221px;
}
}

Then depending on the screensize, you may also add media query per screens then adjust position and logo size.

Hope this helps.

[Paul Democritou]

Thanks, it did help!

[Joao]

Glad to hear it,

Joao

[Paul Democritou]

Hello,
I would also like to add an image in the center of the topbar and/or navbar. This is the code I have in the topbar now:
<span style=”font-size:12px; padding-top:10px; padding-left:7%; color:black;”><span style=”align: center; background: #02aed5; text-align: left; padding:10px; padding-right:8px;”>

GET MY NEW BOOK – JOIN NOW Totally FREE! </span>

However, the image does not display in the center. Can you please help on these two issues?

thanks,
LF

[Author]

Posts