Navbar questions

[pbravin]

can u look into this and provide responses…thanks

phil

[Prasant]

Hello @pbravin,

Thanks for asking.

You can add following CSS under X > Theme Options > CSS:

.x-navbar .desktop .x-nav {
    float: left;
}

.x-navbar .desktop .x-nav>li:after{
content: '\\';
}

For down arrow, please take a look at the solution mentioned in following thread.

Trying to build the cool video in Integrity 1

In case you have any issues, please share website URL for us to take a closer look.

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.

[pbravin]

ignore this…found the bug in a previous css entry

[jade]

Glad to hear you got it sorted.

Cheers!

[pbravin]

unfortunately, the css changes do not do what I asked youbto do

I want the n avmenu to be left justified and add a text to the right portion of the navmenu

[pbravin]

anything yet?

[friech]

Hi Phil,

You can follow this documentation for creating a “Scroll Below Slider” button (the down arrow)

Then add this to Theme Options > CSS for moving the navigation menu to the left side.

.masthead-inline .desktop .x-nav {
	float: left;
}

Regarding the custom text on the right side; while that is outside the scope of support, I could point you in the right direction with the understanding that it would ultimately be your responsibility to take it from here.

You will have to do this through a child theme. You can find more information about the template file customization here:

Best Practices | Themeco Docs

The file that you need to override is _navbar.php that is in /wp-content/themes/x/framework/legacy/cranium/headers/views/global/, copy that file to your child theme, same directory (create the folders if it does not exist on your child theme)

Open/edit the copied file, and look for this line:

<?php x_get_view( 'global', '_nav', 'primary' ); ?>

Add your custom Text just above that line, wrap your custom text with that following markup to make sure it goes right and does not take the entire navigation bar.

<div class="custom-text right" style="width: 30%;">
<!-- YOUR CUSTOM TEXT HERE -->
</div>

You need custom CSS for styling that text using the CLASS .custom-text as the selector.

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

Hope this point you in the right direction.
Cheers!