Shape 5

Wordpress Club Themes => No1 Shopping - Club => : antic July 07, 2015, 02:34:54 AM



: Float Main Menu to the right
: antic July 07, 2015, 02:34:54 AM
Hi, I tried to float the main menu to the right by using this line of css code: #s5_menu_wrap {float:right;} and by removing class="s5_wrap"  from this line of code in the index.php line 247: <div id="s5_menu_inner" class="s5_wrap"> but then I have a problem with the floating menu - it occupies the entire screen width. Can you please help me to float menu items of the main menu and the floating menu to the right?
The url is http://www.aca.cc.rs/refferizer/ (http://www.aca.cc.rs/refferizer/)
Thanking you in advance!


: Re: Float Main Menu to the right
: Tristan Rineer July 07, 2015, 08:56:32 AM
I'm not sure I understand what exactly you're trying to do.  Are you saying you just want the top level menu items to float to the right?

Putting the following code in the style.css of the theme may do what you want:
:
ul#s5_nav{
   float: right;
}
.s5_wrap_fmfullwidth ul.menu {
   float: none !important;
}



: Re: Float Main Menu to the right
: antic July 07, 2015, 09:02:18 AM
Thanks for your answer! That aligned the main menu to the right but the floating menu is still aligned to the left!


: Re: Float Main Menu to the right
: Tristan Rineer July 07, 2015, 09:44:31 AM
I think I got it.  Replace the code I gave you with this:


:
ul#s5_nav{
   float: right;
   width:unset;
}


: Re: Float Main Menu to the right
: antic July 07, 2015, 09:54:38 AM
Great! Thanks!


: Re: Float Main Menu to the right
: antic July 09, 2015, 11:39:37 AM
Hi, can you please help me fixing the issue with the floating menu in Safari browser! I attached an image to illustrate the problem!

I think I got it.  Replace the code I gave you with this:


:
ul#s5_nav{
   float: right;
   width:unset;
}


: Re: Float Main Menu to the right
: Tristan Rineer July 09, 2015, 01:35:26 PM
Does Safari have something like Firebug (http://getfirebug.com/) that will allow you to "inspect" the code and figure out what it's doing?

As shown in the Shape 5 Terms of Use (http://www.shape5.com/terms_of_use.html), support doesn't technically cover custom coding.  The menu works fine when styled as intended when the design was created; the issues you are having are related to custom coding and aren't covered by support.  While I was happy to help up to this point, I have a "no Apple products" policy and therefore will not be installing Safari on my computer.

If Safari has Firebug support or built in Dev Tools, I suggest using it to inspect the menu and play around with the CSS properties.  Considering the fact that it works fine in Firefox and Chrome on both Windows 10 and Linux, I'm guessing there's something that Safari is ignoring that it shouldn't.


: Re: Float Main Menu to the right
: antic July 09, 2015, 01:59:51 PM
I was able to open Developer tools in Safari in order to inspect this problem. As soon as I deselected the check box beside the option ul#s5_nav {
float: right;} the Flex menu went back to its proper position. I attached an image to illustrate this. Would you have any other solution for floating menu to the right but keeping it look good on Safari?
Thanking you in advance!
Alex


: Re: Float Main Menu to the right
: Tristan Rineer July 10, 2015, 08:00:45 AM
From the screenshot, it looks like the problem is that Safari is ignoring the "width:unset" property; that's what the warning symbol means.  You could try changing the "unset" to an actual number until you find one that works.  I would suggest starting with something like 60% and adjusting up or down until you find a number you're happy with - the higher the number, the better.  As is also shown in your screenshot, the default width is 95%, but that is apparently too wide to float right without issues.


: Re: Float Main Menu to the right
: Tristan Rineer July 10, 2015, 08:04:08 AM
I just looked at your site again, this code works in Firefox and Chrome, and because it doesn't have the "unset", hopefully it will work in Safari as well:

:
ul#s5_nav{
   float: right;
   width:75%;
}