Shrinking Nav Bar Problems, plus a few more questions

Support
#1

HI guys, I inherited a website that uses this theme and I am pretty new to it. While most themes have overlapping capabilities and I have been able to figure out most things, the person before me hardcoded a bunch of CSS into the site. While most of it I’ve been able to identify and work with, certain parts of the site still break. Here is what I would like assistance with, some of it is really basic, but I’m a noob, be nice lol.

Here is the website I’m working on: http://www.brooklyndancesportclub.com/home-new/

  1. How do I edit the settings for “paragraph”, Header 1, header 2 and all the other text parameters. I can’t seem to find the options anywhere.

  2. I would like the top navbar to look like this: https://www.bonjiglass.com/

The first step that I took was to change the Navbar Position from “Static Top” to “Fixed Top”. How do I get it to shrink though?

  1. Is there way to take the slider that I use underneath the menu on each page, and bump them up above the menu? But when you scroll down, what I wrote in 2) activates? I’m not sure if there is a setting for this.

Otherwise, love the theme and and thank you so much in advance for the support!!!
-Daniel

#2

Hi Daniel,

  1. The overall typography options can be found in X > Theme Options > Typography. If you enable the Font Manager then you can have an alias for the font names and use throughout the website:

Each element that is used in the Cornerstone page builder has its own set of typography options. For example, you can check the typography options of the Text Element here:

  1. You can not achieve the details of the top section of the website you mentioned using the X theme. You will need more control over your header and you can achieve that using the Pro theme header builder.

  2. No, unfortunately, it is not possible to do so with the X theme. But it is possible with the Pro theme header builder. Here is how to achieve the feature you mentioned using the Pro header builder:

Thank you.

#3

I’m still having trouble editing the size of fonts. On this page I have two text boxes: http://www.brooklyndancesportclub.com/home-new

How do I do it? I can’t seem to find a way at all!

#4

Hi Daniel,

I can see the header and the text in red.

Let’s digest both elements . Both are using text element. The first one is text element then there is heading tag h1 inside it. The next is a text element then there is heading tag h3 inside it. This is the reason why the text element settings will not directly affect the font size. There is another font size defined for H1 and H3 tag.

My recommendation is to use the actual HEADING ELEMENT:

No need to add actual H1 tag in it. Just add the text for headline. Choose h1 or h3 under tag seetings. Then within the available settings, please add text-shadow, aligment, color and other settings you want.

This way settings will be applied accordingly.

Hope this helps.

#5

So if I use the text element, I can ONLY use the H1, H3, etc tags… but can change the styling within the text editor.

I can only get out of H1, H3, etc mode by using the Heading Element?

Also, where do I find the setting to edit how H1, H3, etc is defined? Or is that done individually for each page with CSS code? I can’t find the setting in theme options.

One more question, I need help with the accordian element on this page: http://www.brooklyndancesportclub.com/parents/

It looks amazing on desktop, but on mobile the Header Text (with the questions) doesn’t wrap, it just cuts off the text with … at the end.

Is there any way to change that?

P.S. One more small issue on this page: http://www.brooklyndancesportclub.com/instructors/

There is a weird white header at the top of the page, its definetely a result of something not working properly somewhere on the page, but I can’t figure out where.

Thank you so much for the help, I appreciate the high level of support!

#6

Hi Daniel,

Let me clarify about the Text and Headline element, when you have a paragraph content then use the Text element (do not use text element to hardcode a headings h1 - h6). If you want a heading, then use the Headline element. The Headline element has this tag option where you can choose what tag to be used on your Headings (h1 - h6). Do not put heading and text in the same element.

If you don’t see this option on your end, please enable the Advance Mode. And please if possible do not try to style or format your text using the Rich Text editor, use the Elements configuration options instead, it already has all the text styling and formatting you need.



I understand that editing these pages is kind of hard for you right now, and that is because of all the custom CSS applied to the elements, those custom CSS prevents some of the element’s configuration to work properly. I advise that you eliminate those custom CSS if you can. You might as well build your new home page from scratch, that way you have more controls over your elements. It might save you more time in the long run.

Regarding the Accordion title, please inspect your Accordion under Header tab turn Off the Overflow option

That text with [/cs_content_seo] shortcode showing on the header seems to be a result of broken customization or a plugin that has been deactivated, it something to do with SEO stuff. Unfortunately we can not provide support for any customization or 3rd party plugin related issues.

Cheers!

#7

Thank you so much for the help! The accordian setting I just missed, my mistake. I have to say, I really like this theme, its very well built!

I’ll check out the font stuff later, just have to understand the hierarchy, its 2am and my brain is fried.

I came to the same conclusion, as I was just testing a bunch of event plugins, but it might also be a line of code somewhere, I’m not sure. My last task before I can go to sleep lol!!

I identified that line of code as well, and ran it through this useful little plugin i found called String Locator:

broken codee
broken codee1243×304 32.2 KB

That is what I got. Points towards plugins, but then cornerstone, which is the theme’s editor.

Followed the trail and fixed it! Thank god.

Thank yall so much and much love!!!

#8

Hi Daniel,

I don’t see the error on /instructors/ page any more. I just notice it was built in classic elements, re-saving the page might resolve the issue.

Take your rest,
Stay safe.

#9

If I upgrade to Pro… will all my styling and CSS edits be transferred over from cornerstone to the Pro-theme builder?

I really want to upgrade the site, just making sure!

Also, i figured out how to use the Headline Element and to add fonts to individual pages… but I how do I control the fonts for the “text” element? Where can I find those settings?

#10

Hello Daniel,

When you upgrade to Pro, all the X theme settings and the custom JS/CSS will be inherited by the Pro theme.

The text element will have a Text Format option in the text element settings. If you don’t see some of style options, you need to turn on the Advanced Mode by going to the Settings > Preferences > Advanced Mode

Best Regards.

#11

Is ADVANCED MODE only available for pro?

Random question. When I upgrade to pro… can I better customize the top toolbar above the header… using the header builder? Can I make it look nice like here: https://internationalgrandball.com/

#12

Hi Daniel,

Yes, it is possible with the header Builder. It has a learning curve and you will need to familiarize yourself with the options and elements of the Header Builder so that you can utilize the tool to create such header you mentioned.

I suggest that you start your journey here. And you are always welcomed to check our Youtube channel header builder related videos.

Kindly open up new threads for additional questions as it will help us to focus on each issue and give you better support which you deserve. Having a long thread makes the maintaining job harder and also it will be harder for the other customers to find the correct information if they have similar issues. You are always welcomed to reply to this thread to follow up on the same question.

Thank you.

#13

Ok, so sorry, one last simple question. There are so many small things that I feel bad making a support ticket from each one. Last question, i promise!

On desktop, the top pink bar looks normal: http://www.brooklyndancesportclub.com/privatelessons/

On mobile, the left side text goes about the SM Icons and is surrounded by a black background. I kind of like it, but not sure the client will. How do I remove that black background? Is there a way to have the text and icons line up on the same row on mobile?

Also, is there a way to get rid of the underline?

Is there a way to make the entire header sitcky on mobile?

#14

Hi Daniel,

The topbar has a natural black background on mobile, you can use the custom CSS below to reset it to transparent on mobile, with the understanding that it would ultimately be your responsibility to take it from here.

/*remove border*/
.x-topbar .p-info a {border-width: 0;}

/*topbar background on mobile*/
@media (max-width: 767px) {
	.x-topbar .p-info {
		background-color: transparent;
	}
}

You can find the proper CSS code selector using the Chrome browser Developer Toolbar
For the CSS code itself, I suggest that you get started with this tutorial

Yes, but that would require customization that outside of the support that we can offer. If you need a sitcky bar on mobile, then you need to create a header with the header builder.

Header and Footer Builder Overview

If you have a follow-up question, please write it on a new thread as this one is getting mixed up and hard to follow.

Cheers!

#15

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