[AbacuxCSParticipant]

Dear Support,

Can you please help me with this minor issue? I am building a site for my clinet and I got the logo to be responsive but not the Menu (Home) or Search icon. I do not see the small dropdown menu icon on the right when I reduce the screen.

Also, how do I make the “Home” to have an overline instead of an underline? How do I have no line at all?

Thank you.

[AbacuxCSParticipant]

This reply has been marked as private.

[Rue NelModerator]

Hello There,

Thanks for writing in! You cannot see the icon because it is in white color. please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.masthead-inline .x-btn-navbar {
    color: #000;
}

Feel free to change the color if you need to.

If you want to remove the border, you can use this code:

.x-navbar .desktop .x-nav > li > a:hover, 
.x-navbar .desktop .x-nav > .x-active > a, 
.x-navbar .desktop .x-nav > .current-menu-item > a {
    box-shadow: none;
}

To have the line above the menu item, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.x-navbar .desktop .x-nav > li > a {
    border: none;
    border-top: 2px solid transparent;
}

.x-navbar .desktop .x-nav > li > a:hover, 
.x-navbar .desktop .x-nav > .x-active > a, 
.x-navbar .desktop .x-nav > .current-menu-item > a {
    border-color: #dd3333;
    box-shadow: none;
}

We would loved to know if this has work for you. Thank you.

[AbacuxCSParticipant]

It worked 95%! The last 5% is now when I hover over the nav bar, a vertical line appears next to “Home”. I sent you a screenshot. Thank you.

[AbacuxCSParticipant]

This reply has been marked as private.

[AbacuxCSParticipant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

Please find this code:

.x-navbar .desktop .x-nav > li > a:hover, .x-navbar .desktop .x-nav > .x-active > a, .x-navbar .desktop .x-nav > .current-menu-item > a {
 border-color: #582831; 
    box-shadow: none;
    
}

And update it to :

.x-navbar .desktop .x-nav > li > a:hover, .x-navbar .desktop .x-nav > .x-active > a, .x-navbar .desktop .x-nav > .current-menu-item > a {
    border-color: #582831;
    box-shadow: none;
    border-left:none;
}

Hope it helps.

[AbacuxCSParticipant]

It worked, thank you. Now, why does my logo and nav bar do not expand with the site? The logo should always be the defined px from the left of the nav bar, likewise the the search bar and nav bar. Thank you.

[ChristopherModerator]

Thanks for writing in! Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

[AbacuxCSParticipant]

My site is http://www.chowmeinhouse.com. I want the nav bar to act upon, expansion and reduction of screen, exactly like the Ethos3 demo. It seems that they are blocked in somehow. Try expanding the screen and it does not move with it like Ethos3. Lastly, it seems that Theme X requires lots of CSS and I have yet to familiarize myself with that. What is your advice? Thank you.

[Rue NelModerator]

Hello There,

Ethos 3 navbar layout is setup as stacked and you are using inline. Please try changing this setting in your customizer, Appearance > Customize > Header > Logo & Navigation > Layout. You can compare the output by playing around with this setting.

Hope this helps.

[AbacuxCSParticipant]

When I changed it to stacked, the nav bar is not long the same color when the screen is minimized. It became white again. I have previously changed it to #582831. Also, how would I be able to include an icon like the “X” within Ethos3? I want it to be my logo there. Thank you.

[NicoModerator]

Hi There,

A bit confused, would you mind sharing us screenshots of what you want to achieve.

On the first part, if you mean changing the white hover color on the nav bar, try to add this code below on your customizer’s custom CSS:

.x-btn-navbar:hover {
    color: #fff;
}

Once we got the guide, we’ll help you the best we could.

Thanks.

[AbacuxCSParticipant]

Here is the screenshot that I am talking about. See how the logo and nav menus are so close to the middle? I want it to behave like the homepage of theme.co. The “X” logo is always to the left, even when I expand or reduce the screen size. Lastly, how do I create the “Purchase” button like theme.co’s homepage? Thank you very much.

[FriechModerator]

Hi There,

You can add this under Custom > CSS in the Customizer.

.x-navbar .x-navbar-inner > .x-container.max {
	max-width: none;
	width: 100%;
}

Regarding the PURCHASE button, that is an image link.

http://theme.co/media/x-home-main-header-3-button.png

Hope it helps, Cheers!

[Author]

Posts