Navigation
This is archived content. Visit our new forum.
  • Author
    Posts
  • #675186

    AbacuxCS
    Participant

    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.

    #675187

    AbacuxCS
    Participant
    This reply has been marked as private.
    #675358

    Rue Nel
    Moderator

    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.

    #675525

    AbacuxCS
    Participant

    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.

    #675532

    AbacuxCS
    Participant
    This reply has been marked as private.
    #675535

    AbacuxCS
    Participant
    This reply has been marked as private.
    #675536

    Christopher
    Moderator

    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.

    #675584

    AbacuxCS
    Participant

    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.

    #675592

    Christopher
    Moderator

    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.

    #675599

    AbacuxCS
    Participant

    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.

    #675602

    Rue Nel
    Moderator

    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.

    #676555

    AbacuxCS
    Participant

    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.

    #676918

    Nico
    Moderator

    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.

    #677912

    AbacuxCS
    Participant

    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.

    #678052

    Friech
    Moderator

    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!