Align items on topbar virtue

  • thebeathappening

    (@thebeathappening)


    9 years, 1 month ago

    Hello,

    I am new to word press and I decided to try the Virtue theme as I think it’s one of the easiest to customize, however, my knowledge of tweaking CSS’s is a bit limited and I am stuck in the top bar alignment items. I took the header off and just left the top bar, in the top bar i want to have a basic navigation menu, social media icons, search bar and the logo of the site aligning with it all. The only way I can add the logo on this free version will be by adding a widget of an image, which i did, however always gets underneath the search bar widget. What I wanted is, by order: logo, 5 to 6 menu items, 3 social icons and the search bar everything lined up and close. Right now my customized CSS that I have inserted on advanced settings and which I tweaked/copied by googling it and searching here is:

    .topclass {
    position: fixed;
    z-index: 1000;
    width: 100%;
    }
    .topbarmenu ul li a {
    font-size: 15px;
    line-height: 31px;
    }
    @media (min-width: 992px){
    .topbar-widget {
    position: right;
    left: 25%;
    width: 50%;
    bottom: 100%;
    text-align:center;
    padding-bottom:5px;
    padding-top: 5px;
    .topclass .icon {
    float: left;
    margin-top: 7px;
    }
    footer#containerfooter li {
    list-style: none;
    list-style-position: outside;
    margin-left: -19px !important;
    width: 190px;
    }

    What the topbar looks now (you can see the problem right away)

    topbar

    Thanks for all your time in advance
    David

Viewing 15 replies - 1 through 15 (of 15 total)
  • hannah

    (@hannahritner)

    9 years, 1 month ago

    Hi David,
    Are you able to post a link to your site?
    Thanks!

    Hannah

    Thread Starter thebeathappening

    (@thebeathappening)

    9 years, 1 month ago

    Hello Hannah,
    Is there anyway I can send you a pvt message? Thanks

    Thanks
    David

    hannah

    (@hannahritner)

    9 years, 1 month ago

    So some of your css is actually broken. I would suggest removing all of this:

    @media (min-width: 992px){
.topbar-widget {
position: right;
left: 25%;
width: 50%;
bottom: 100%;
text-align:center;
padding-bottom:5px;
padding-top: 5px;
.topclass .icon {
float: left;
margin-top: 7px;
}

    Then add this:

    @media (min-width: 992px) {
.col-md-6.col-sm-6.kad-topbar-left {
    width: 60%;
}
.col-md-6.col-sm-6.kad-topbar-right {
    width: 40%;
}
}

    Let me know if that works!

    Hannah

    Thread Starter thebeathappening

    (@thebeathappening)

    9 years, 1 month ago

    Hello Hannah,

    Thank you very much for your help. It did solved the issue of the alignment. I wanted however to ask you if there is any chance that the logo/social icons can come in first place of all before the navigation menu (to the left) and the search bar to be more centered as it went up when I did the changes on the css now. for you to have an idea i am still “playing” with the site theme and I am using a host from a different site in a sub folder, but I wouldn’t like to post the link here as it is connected to a main site yet that is why I asked about pvt messaging but I think is not possible through here.

    Thank you again,
    David

    hannah

    (@hannahritner)

    9 years, 1 month ago

    In Theme Options > Topbar Settings try turning the Topbar Layout Switch On. Does that get you closer?

    Hannah

    Thread Starter thebeathappening

    (@thebeathappening)

    9 years, 1 month ago

    Hi Hannah,
    I tried that, it doesn’t helps really – this is how it looks now:

    https://ibb.co/hpBkBQ

    if you notice the search bar is on the top instead of centered too

    Thanks again,
    David

    Thread Starter thebeathappening

    (@thebeathappening)

    9 years, 1 month ago

    I forgot to say it is looking like that cause I have add the logo as a social icon so it is close to the other icons. however when i try to put it as an image widget it jumps to the bottom or top of the search bar and stretches the top bar down again like this – my idea is, logo first, menu next, social icons next, search bar last

    https://ibb.co/dYYJy5

    Thanks
    David

    hannah

    (@hannahritner)

    9 years, 1 month ago

    You can email me your url and I can help with css to align it like you’re wanting.
    [email protected]

    Hannah

    Thread Starter thebeathappening

    (@thebeathappening)

    9 years, 1 month ago

    Hello Hannah,

    Thank you, I just sent it to your email

    Thank you
    David

    hannah

    (@hannahritner)

    9 years, 1 month ago

    So because you have added your logo as part of the icon menu there isn’t a way to separate that. But you can use this css to swap the icon menu before the topbar menu:

    .topbarmenu ul li {
    float: right;
}

    Let me know what you think!

    Hannah

    Thread Starter thebeathappening

    (@thebeathappening)

    9 years, 1 month ago

    Hello Hannah,

    Thank you that did it. One last question concerning this, how do I level down the search bar so it gets down or descends a little bit from the top the way it is now?

    Thanks again for all,
    David

    hannah

    (@hannahritner)

    9 years, 1 month ago

    This css should work:

    #topbar-search form {
    margin-top: 10px;
}

    Hannah

    Thread Starter thebeathappening

    (@thebeathappening)

    9 years, 1 month ago

    Thank You Hannah,

    Worked perfectly. Thank you very much for all your help on this. Very appreciated.

    Thanks
    David

    hannah

    (@hannahritner)

    9 years, 1 month ago

    No problem! Glad we got it looking as you wanted 🙂

    Hannah

    Thread Starter thebeathappening

    (@thebeathappening)

    9 years, 1 month ago

    Thank you again Hannah

    David

Viewing 15 replies - 1 through 15 (of 15 total)

The topic ‘Align items on topbar virtue’ is closed to new replies.