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

[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.

[Elvin]

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. 🙂

[Vikas]

techbhay this is the site url

[Elvin]

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.

[Vikas]

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

[Vikas]

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

[Elvin]

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

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

[Vikas]

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

[David]

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;

}

[Vikas]

Thanks your help.

[David]

You’re welcome

[Author]

Posts