Coding "change color bullet points"

How do I change color for my bullet points? Right now they are black and I want to recolor them to white. What is the coding for that?

Hey Hans,

You can do it through custom CSS. Please add this code in X > Theme Options > CSS:

ul {
  list-style: none; /* Remove default bullets */
}

ul li::before {
  content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: red; /* Change the color */
  font-weight: bold; /* If you want it to be bold */
  display: inline-block; /* Needed to add space between the bullet and the text */ 
  width: 1em; /* Also needed for space (tweak if needed) */
  margin-left: -1em; /* Also needed for space (tweak if needed) */
}

Hope this helps.

Thank you for the help. How do i get the white color to black in this picture?

https://gyazo.com/f6748fd85f86439e15473fc87a2665fb

Hello Hans,

Thanks for updating the thread.

Please add following CSS under X > Theme Options > CSS:

.x-logobar {
    background-color: #ddd;
}

In case above code does not work, please share admin login details as I see a under construction page active on the website.

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

It worked, thank you for the help

We’re glad it worked.

Cheers!

I Have question about the menu. I need to fix the mobil, the laptop and the ipad version,

how do i fix this?

https://gyazo.com/03ab99895365f843c7561874eecdb57d

the layout is good for PC, but for the other devices it looks weird

Hey Hans,

Since you’re using Pro so you can simply hide your desktop menu in mobile screens and display a Navigation Collapsed element in its place. To do this add two bars in header builder (one for Desktop screens and other for mobile screens)

In the Desktop Bar, add Navigation Inline element and hide the bar in smaller screens using Hide During Breakpoints feature (see screenshot)

In the Mobile Bar add Navigation Collapsed element and hide the bar in large screens in a similar way:

Hope this helps!

Thank you very much, it worked

i have one more question, how do i use my new header instead of my old one?

Right now when i am in Cornerstone(pro) it shows this header:

https://gyazo.com/c4bc15440574a87b91b54d08fda41d6b

and this is my new header:

https://gyazo.com/5bf281c10ef1c411a5b2e7b606a234f0

How do i switch the old one for my new one?

Hello Hans,

You need to make your new header Global to use it site wide. To do that click on the newly created Header in header builder:

You’ll see options in the right panel to assign it on pages just click on Make Global button to use it on all pages:

You can also checkout Assigning a Header or Footer section here https://theme.co/apex/forum/t/pro-header-and-footer-builder-introduction/103

Cheers!

Thank you very much

When i made it global my text on the navigation line become grey instead of white, but when i go back to the header edit it is white

https://gyazo.com/f5ce2ba60209dd0825bfbba979ea952b

How do i Fix that?

Hey Hans,

Please inspect your Navigation Inline element in header builder:

Click on the Top Links tab:

Under Primary Text Style title, make sure the Text Color is set to white:

If the settings are right then kindly get back to us with the URL/User/Pass of your WordPress dashboard using the Secure Note functionality of the post to follow up the case.

Thanks!

I Fixed it.

How do i remove the white dots in the header?

https://gyazo.com/cfb31e5aa4e2481b086ef9483bc7d85d

Hi Hans,

To remove the dots from your header menu, please add the following code in the Theme Options > CSS:

header ul li::before {
  content: "";
}

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

It worked. Thank you

Glad it worked.

Cheers!

how do I do something like this in the footer?

https://gyazo.com/100d9a51037b31a0a00e88673e18b146

Hello Hans,

Are you using the default footer? Please go to X > Theme Options > Footer and enable the Footer Widget Areas by selecting Three. You can then go to Appearance > Widgets and insert “Navigation Menu” widget into Footer 1, Footer 2 and Footer 3. If you haven’t created the different menu and menu links, you can do that in Appearance > Menus. You can create as many menus as you may need.

Hope this helps.

i am using X pro.

This is what i am using, i guess it is X pros Version of a footer

https://gyazo.com/7ec6c926d1844078926ede0bfa34b6dc