Top Bar Menu >Sub Menu> Submenu Padding issue

Mahesh
(@mailtopmahesh)

8 years, 5 months ago

Dear Alex Thank you for your lovely theme,

I really Love the theme and especially Post grid layouts and Sidebars with your Own Widgets (Alx Tabs, Alx Posts). Here Actually i’m implementing my site on localhost and i have few queries.
1. Top Bar Menu > Sub Menu > Submenu Padding Issue
Actually I’m looking to change Top Bar Padding Top & Bottom to 8px or 10px and Font to 15px
For this query i have used following css, hence except last submenu list(sub menu> submenu) :

#nav-topbar .nav > li > a { padding-top: 8px; padding-bottom: 8px; }
#nav-topbar ul.sub-menu { padding-top: 0px; padding-bottom: 0px; }
#nav-topbar .nav ul { top: 40px; }
#nav-topbar ul.sub-menu {top: 36px;}

* Main Top Bar Menu Page: adjusted in right way(working and no issue)
* Top Menu Page > Sub Menu Page List : adjusted in right way (working and no issue)
* Top Menu Page > Sub Menu Page List > Sub Menu’s List : showing list right bottom corner of Sub Menu Page List(Here’s the issue : It’s very hard to to hover and select those pages)

2. Only Search Form in Top bar > Right corner
3. Looking to shift Hueman Social Links in Top Bar with the above mentioned Padding which should be exactly left to the topbar Search form.

I appreciate your help. Thank You in Advance.

Regards
Mahesh

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

bdbrown
(@bdbrown)

8 years, 5 months ago

Hi Mahesh. There is almost no way to troubleshoot this without being able to see the site configuration. There are several variables that could be affecting what you see and, if we can’t see it, we’ll just be guessing at a solution. Is there any chance you can put up a test site somewhere, even on a temporary one-month hosting plan?

Thread Starter Mahesh
(@mailtopmahesh)

8 years, 5 months ago

Hello bdbrown,
Thank You for your quick reply,
I’m very sad to inform you that to implement a new site is somewhat difficult for me and it’s take much time too But anyway I’ll try to do as early as possible meanwhile can you please forward the css which can be give a responsive look for Top bar navigation pages and it’s attached submenus is well.

Thanking You,

Cheers,
Mahesh.

bdbrown
(@bdbrown)

8 years, 5 months ago

1. It appears that the second submenu steps down from the first submenu. What exactly are you trying to change with the CSS you entered?

2. Not sure what you’re asking here.

3. See this thread:
https://wordpress.org/support/topic/add-social-media-on-sticky-menu?replies=2

Thread Starter Mahesh
(@mailtopmahesh)

8 years, 5 months ago

Thank You for your reply bdbrown,

coming to
1. here actually for my website i’m using single navigation which can be use in TOP bar and i’m trying to reduce the hight of whole topbar ( as i know default topbar hight is 50px) and the same hight should be maintain by all attached menu pages(main pages, submenu’s…. without breaks)

2. looking to replace only search box instead of showing with search icon at topbar’s right corner.
3. thank you for your success thread i’ll check confirm you the status.

Thanking You,

Cheers,
Mahesh.
bdbrown
(@bdbrown)

8 years, 5 months ago
1. Add this to your existing css:
```
#nav-topbar ul.sub-menu ul.sub-menu {top: 0;}
```
2. Try this:
```
/* hide search icon in topbar */
#nav-topbar .toggle-search {
    display: none;
}
/* display search box in topbar */
#nav-topbar .search-expand {
    display:block !important;
    top: -50px;
    height: 50px;
}
```
Thread Starter Mahesh
(@mailtopmahesh)

8 years, 5 months ago
Awesome Dude,

1. working like charm, fantastic.
3. thank you for your support link, Social Icons at top bar also working cool.
Coming to
2. Here i have used your mentioned css
```
/* hide search icon in topbar */
#nav-topbar .toggle-search {
    display: none;
}
/* display search box in topbar */
#nav-topbar .search-expand {
    display:block !important;
    top: -50px;
    height: 50px;
}
```
But here after modifying css, search bar is fully covered topbar right corner including social icons and also need to remove or hide search bar shadow which is looking odd.

Need your help to make responsive look for top bar right position with Social Icons, Search bar(With out search Icon) and if possible please let me know how to reduce wide size of search bar(i think now it is 340px).

Cheers,
Mahesh.
Thread Starter Mahesh
(@mailtopmahesh)

8 years, 5 months ago

please click on following screenshots links of before and after applying css:

Before:
http://s15.postimg.org/sb6z5wysb/before_search_icon_remove.jpg

After:
http://s15.postimg.org/j4ooimtjv/affter_removed_the_search_icon.jpg

Cheers,
Mahesh
bdbrown
(@bdbrown)

8 years, 5 months ago
Try this in place of the css I posted above:
```
/* hide search icon in topbar */
#nav-topbar .toggle-search {
    display: none;
}
/* display search box in topbar */
#nav-topbar .search-expand {
    display: block !important;
    top: -38px;
    right: 200px;
    height: 50px;
    background: transparent;
    width: 200px;
}

/* remove search box shadow */
#nav-topbar .search-expand-inner {
    padding: 0;
}
```
The responsive display is a bit more complicated; try this:
```
/* adjust search box and menu icon for mobile */
@media only screen and (max-width: 719px) {
  #nav-topbar, #nav-topbar .nav-toggle  {
    height: 38px;
  }
  #nav-topbar .nav-toggle .fa-bars  {
    padding: 5px 0;
  }
  #nav-topbar .search-expand {
    display: block !important;
    top: 0;
    left: 0;
    right: auto;
    height: 50px;
    background: transparent;
    width: 200px;
  }
}
```

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

The topic ‘Top Bar Menu >Sub Menu> Submenu Padding issue’ is closed to new replies.