[Resolved] I am having issues with top nav of my website

Home Forums Support I am having issues with top nav of my website

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #1444771
    Vikas

    here the link to my website -> techbhay.com and i enabled top nav widget from customization but it looks messy and i am unable to change it location etc.
    Here is what i want it to look like -> https://ibb.co/r4fjJHJ
    Any help would be appreciated.

    #1444787
    Elvin
    Customer Support

    Hi,

    Can you provide the URL link to your site so we could take a closer look to provide better help?

    You can use the private information field.

    Kindly reply once you’ve added it so we are notified. 🙂

    #1444814
    Vikas

    techbhay this is the site url

    #1444949
    Elvin
    Customer Support

    Thanks.

    You can try this code:

    .top-bar .inside-top-bar {
    	display: flex; 
    	align-items: center;
    	justify-content: flex-end;
    }

    This turns your top bar into a flex-box and pushes its contents to align right(flex-end).

    As for styling the widget. You can go to Appearance > Widgets > Top Bar and edit/style your social media icons widget.

    Let us know if it helps.

    #1445186
    Vikas

    Yes thanks to you it worked can you help my top bar look like it => https://ibb.co/r4fjJHJ

    #1445190
    Vikas

    Also where is the setting for hiding top nav in mobile view?

    #1445196
    Elvin
    Customer Support

    You can try this code to hide topbar on mobile view:

    @media (max-width:768px){
       .top-bar {
    	display:none;
       }
    }
    #1445203
    Vikas

    Elvin can you help me with the top bar styling issue i want to make it look like this => https://ibb.co/r4fjJHJ

    #1445453
    David
    Staff
    Customer Support

    Hi there,

    do you mean the color / diagonal background behind the social icons?

    If so try this CSS:

    .top-bar .inside-top-bar {
        padding: 0;
    }
    .widget ul.zoom-social-icons-list--no-labels.zoom-social-icons-list--without-canvas {
        display: flex;
        align-items: center;
        margin-top: 0;
        margin-bottom: 0;
        margin-left: 40px;
        padding: 0 20px 0 0;
        background-color: #f1f1f1;
    
    }
    .widget .zoom-social-icons-list--no-labels.zoom-social-icons-list--without-canvas:before {
        content: '';
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 0 48px 24px;
        border-color: #fff #fff #f1f1f1 #fff;
    
    }
    #1445498
    Vikas

    Thanks your help.

    #1445572
    David
    Staff
    Customer Support
Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.