Forum Support

Shape 5
April 19, 2021, 04:08:17 PM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News: Shape 5 Forum
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Float Main Menu to the right  (Read 742 times)
antic
Jr. Member
**
Offline Offline

Posts: 402



« on: 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/
Thanking you in advance!
Logged
Tristan Rineer
Global Moderator
*****
Offline Offline

Posts: 3858

Gravatar


« Reply #1 on: 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:
Code:
ul#s5_nav{
   float: right;
}
.s5_wrap_fmfullwidth ul.menu {
   float: none !important;
}

Logged

Tristan Rineer
------------
Shape 5 Team



- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
antic
Jr. Member
**
Offline Offline

Posts: 402



« Reply #2 on: 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!
Logged
Tristan Rineer
Global Moderator
*****
Offline Offline

Posts: 3858

Gravatar


« Reply #3 on: July 07, 2015, 09:44:31 AM »

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


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

Tristan Rineer
------------
Shape 5 Team



- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
antic
Jr. Member
**
Offline Offline

Posts: 402



« Reply #4 on: July 07, 2015, 09:54:38 AM »

Great! Thanks!
Logged
antic
Jr. Member
**
Offline Offline

Posts: 402



« Reply #5 on: 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:


Code:
ul#s5_nav{
   float: right;
   width:unset;
}
Logged
Tristan Rineer
Global Moderator
*****
Offline Offline

Posts: 3858

Gravatar


« Reply #6 on: July 09, 2015, 01:35:26 PM »

Does Safari have something like Firebug that will allow you to "inspect" the code and figure out what it's doing?

As shown in the Shape 5 Terms of Use, 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.
Logged

Tristan Rineer
------------
Shape 5 Team



- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
antic
Jr. Member
**
Offline Offline

Posts: 402



« Reply #7 on: 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
Logged
Tristan Rineer
Global Moderator
*****
Offline Offline

Posts: 3858

Gravatar


« Reply #8 on: 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.
Logged

Tristan Rineer
------------
Shape 5 Team



- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
Tristan Rineer
Global Moderator
*****
Offline Offline

Posts: 3858

Gravatar


« Reply #9 on: 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:

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

Tristan Rineer
------------
Shape 5 Team



- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF | SMF © 2013, Simple Machines
Joomla Bridge by JoomlaHacks.com
Valid XHTML 1.0! Valid CSS!
Looking for the largest variety in template designs? Look no more. Never buy 1 theme again. Signups start at just $89 for access to all of our themes.
Send Us An Email
Please send us your questions and we will email you back as soon as we can. Product support questions should be posted in our support forums under the Help menu. Our staff will assist you from there.