You need to log in to create posts and topics.

Search Bar To Large For Forum Width When Sidebar Active

H everyone,

I'm having the issue of when I add a sidebar to my forum that the width of the forum is not large enough to support the search bar it drops the search bar down lower than the navigation text I personally think that looks messy. anyone knows how to fix it.

Asgaros Search Bar Issue

Cheers.

/* SEARCH */
#af-wrapper #forum-search {
    float: right;
    width: 238px; ---- Changed This to 220px
    height: 44px;
    line-height: 44px;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: #fff;
    color: #444;
    border: none;
    border-radius: 3px;
    cursor: text;
}

#af-wrapper #forum-search input {
    vertical-align: inherit;
    font-style: italic;
    padding: 0;
    border: 0;
    background-color: inherit;
    width: 190px; ---- changed this to 90px
    height: initial; /* comp */
    font-size: 13px;
    line-height: normal;
    display: initial; /* comp */
    outline: none;
    box-shadow: none; /* comp */
    min-height: initial; /* comp */
    background-image: none; /* comp */
    float: initial; /* comp */
}

Fixed my problem should have tried just a little bit harder before posting.

changed > Skin > style.css > Found Search and changed width from 238px to 220px and presto now it works.

Hey @nichequestions,

it's better not to make any changes in the plugin files, because you will lose all changes with every update. You should insert a custom CSS for  your changes instead:

/* Set custom width to Asgaros Forum search field */

#af-wrapper #forum-search {
    width: 100px;
}

@media screen and (max-width: 782px){
  #af-wrapper #forum-search {
    width: 100%;
  }
}

To insert this CSS go to admin area of WordPress >> Appearance >> Customize. Then insert the CSS in the section 'Additional CSS'.

Quote from qualmy91 on May 23, 2020, 5:31 am

Hey @nichequestions,

it's better not to make any changes in the plugin files, because you will lose all changes with every update. You should insert a custom CSS for  your changes instead:

/* Set custom width to Asgaros Forum search field */

#af-wrapper #forum-search {
    width: 100px;
}

@media screen and (max-width: 782px){
  #af-wrapper #forum-search {
    width: 100%;
  }
}

To insert this CSS go to admin area of WordPress >> Appearance >> Customize. Then insert the CSS in the section 'Additional CSS'.

Indeed Your Right. I've already copied to custom.css but still good to show where I found the CSS code. there might have been a better way to do it. if so let me know.

Where is this custom.css file located? I just had a look at your forum but this CSS file is not loaded by the browser.

You can also write the CSS code in the custom CSS section of Asgaros Forum: Forum >> Appearance then put it in the Custom CSS section.

Uploaded files:
  • Screenshot_20200523_124043.png
Quote from qualmy91 on May 23, 2020, 7:41 am

Where is this custom.css file located? I just had a look at your forum but this CSS file is not loaded by the browser.

You can also write the CSS code in the custom CSS section of Asgaros Forum: Forum >> Appearance then put it in the Custom CSS section.

Yeah its there not sure, maybe try again if your interested but I've added it to the same spot as your picture.

I see. You copied the whole block to the custom CSS, right? It's better to only add the CSS code in this section that you want to change. To Prevent the Input Field from popping out of the menu, you have to add one more block

/* Set custom width to Asgaros Forum search field */
#af-wrapper #forum-search {
    width: 100px;
}
@media screen and (max-width: 782px){
  #af-wrapper #forum-search {
    width: 100%;
  }
}

#af-wrapper #forum-search input{
  width: calc(100% - 45px);
}

That's a much nicer way of doing this. I'm always so dirty with my coding. hack slash bash stuff into submission to get it working.